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

Simple way of displaying images from parse.com database using javascript

本文关键字：图像 显示图 简单 方法 显示 数据库 javascript parse com 使用      更新时间：2023-09-26

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

我需要图像以时间顺序显示。使用当前的代码，它在大多数情况下工作得很好，但有一点bug。

有两个主要问题:

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>

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

嘿，你犯了一个错误。这对我不起作用。然后我发现它是url()不是url。修正案正在酝酿中。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),

});

相关文章：