Question

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

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

有两个主要问题：

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>

Answer 1

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

Answer 2

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

}

$（document）.ready（function（）{

getPhotos（）;

// refresh（10000）;

}）;

使用javascript从parse.com数据库显示图像的简单方法

2 个答案: