1

我正在处理一个非常简单的页面，它只是从 parse.com 的表格中提取和显示图像。我对 javascript 没有太多经验，这可能从下面的代码中可以看出。

我需要图像按时间顺序显示。使用当前代码，它在大多数情况下都可以正常工作，但有一点问题。

有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>
4

2 回答 2

2

Internet Explorer 阻止混合内容。由于 Parse 的 JavaScript SDK 需要 SSL，因此您还需要使用 HTTPS 托管您的应用程序，以便从 IE 访问它。

于 2013-04-18T20:41:20.543 回答
0

嘿，你犯了一个错误。它不适合我。然后我发现它是 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);

}

$(文档).ready(函数() {

获取照片（）；

// 刷新（10000）；

});

于 2014-05-19T07:11:56.487 回答