使用javascript顯示來自parse.com數據庫的圖像的簡單方法

我正在研究一個非常簡單的頁面，該頁面只是從parse.com中的表中拉出並顯示圖像。我沒有太多的JavaScript經驗，從下面的代碼中可以明顯看出。使用javascript顯示來自parse.com數據庫的圖像的簡單方法

我需要按照時間順序顯示圖像。使用當前的代碼，大多數情況下它都能正常工作，但是卻有點小問題。

有2個主要問題：

1）有時，隨機，一個特定的新形象可能根本就不會在頂部，而是顯示介於兩者之間。

2）此頁面適用於Firefox和Chrome，但不適用於IE。

有沒有更好的方法來實現這一點，還是有什麼我應該改變？任何幫助，將不勝感激。

頁源 -

<!doctype html> 
<head> 
    <meta charset="utf-8"> 

    <title>My parse images</title> 
    <meta name="description" content="My Parse App"> 
    <meta name="viewport" content="width=device-width"> 
    <!-- <link rel="stylesheet" href="css/reset.css"> --> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js"></script> 
</head> 

<body> 

    <div id="main"> 




    <script type="text/javascript"> 
    Parse.initialize("xxxxxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxxx"); 

    var config = { 
    parseAppId: 'xxxxxxxxxxxxxxxxxxx', 
    parseRestKey: 'xxxxxxxxxxxxxxxxxx', 
    streamName: 'parse-demo' 
}; 


var getPhotos = function() { 
    var userImages = Parse.Object.extend("userImages"); 
    var query = new Parse.Query(userImages); 

    query.find({ 
    success: function(results) { 


     $('#photo-container').children().remove(); 


     for(var i=results.length - 1; i>=0; i--){ 

      var img = new Image(); 
      img.src = results[i].get("image").url; 
      img.className = "photo"; 
      document.body.appendChild(img); 


     } 



    }, 
    error: function(error) { 
     alert("Error: " + error.code + " " + error.message); 
    } 
    }); 
}; 

    function refresh (timeoutPeriod){ 
    refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod); 
    } 


$(document).ready(function() { 

    getPhotos(); 

// refresh(10000); 

}); 

    </script> 
</body> 

</html>

來源

2013-04-18 Ayrton Senna

的Internet Explorer塊混合內容。由於Parse的JavaScript SDK需要SSL，因此您需要使用HTTPS託管您的應用，以便從IE訪問它。

來源

2013-04-18 20:41:20

您可以找到IE博客文章的主題在這裏：http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions- limits-and-workarounds.aspx IE承認這是「過於寬泛」，並在後來的版本中改變了立場。該博客還包含混合模式託管的示例解決方法。 –

嘿，你犯了一個錯誤。它不適合我。然後我發現它是url（）沒有url。修正是img.src = results [i] .get（「image」）。url（）;

<!doctype html> 
<head> 
<meta charset="utf-8"> 

<title>My parse images</title> 
<meta name="description" content="My Parse App"> 
<meta name="viewport" content="width=device-width"> 
<!-- <link rel="stylesheet" href="css/reset.css"> --> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js"> 
</script> 
</head> 

<body> 

    <div id="main"> 




    <script type="text/javascript"> 
     Parse.initialize("xxxxxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxxx"); 

     var config = { 
     parseAppId: 'xxxxxxxxxxxxxxxxxxx', 
     parseRestKey: 'xxxxxxxxxxxxxxxxxx', 
     streamName: 'parse-demo' 
     }; 


     var getPhotos = function() { 
     var userImages = Parse.Object.extend("userImages"); 
     var query = new Parse.Query(userImages); 

     query.find({ 
     success: function(results) { 


     $('#photo-container').children().remove(); 


     for(var i=results.length - 1; i>=0; i--){ 

     var img = new Image(); 
     img.src = results[i].get("image").url(); 
     img.className = "photo"; 
     document.body.appendChild(img); 


     } 



    }, 
     error: function(error) { 
     alert("Error: " + error.code + " " + error.message); 
     } 
    }); 
    }; 

    function refresh (timeoutPeriod){ 
     refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);

}

$（文件）。就緒（函數（）{

getPhotos（）;

//刷新（10000）;

}）;

來源

2014-05-19 07:11:56 user3143770

使用javascript顯示來自parse.com數據庫的圖像的簡單方法

回答

相關問題