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

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

javascript html image parse-platform

使用javascript显示parse.com数据库中图像的简单方法,javascript,html,image,parse-platform,Javascript,Html,Image,Parse Platform,我正在做一个非常简单的页面，它只是从parse.com中的一个表中提取和显示图像。我对javascript没有太多的经验，从下面的代码中可以看出这一点我需要图像按时间顺序显示。对于当前的代码，它在大多数情况下运行良好，但有点问题主要有两个问题： 1）有时，随机地，一个特定的新图像可能不会出现在顶部，而是出现在中间的某个地方 2）此页面适用于Firefox和Chrome，但不适用于IE 有没有更好的方法来实现这一点，或者有什么我应该改变的？任何帮助都将不胜感激页面来源- <!doc

我正在做一个非常简单的页面，它只是从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>


我的解析图像
初始化（“xxxxxxxxxxxx”，“xxxxxxxxxxxxxx”）；
变量配置={
parseAppId:'xxxxxxxxxxxxxxxx'，
parseRestKey:'xxxxxxxxxxxxxxxx'，
streamName:'解析演示'
};
var getPhotos=function（）{
var userImages=Parse.Object.extend（“userImages”）；
var query=newparse.query（userImages）；
查询.查找({
成功：功能（结果）{
$（“#照片容器”）.children（）.remove（）；
对于（var i=results.length-1；i>=0；i--）{
var img=新图像（）；
img.src=results[i].get（“image”）.url；
img.className=“照片”；
文件.正文.附件（img）；
} 
},
错误：函数（错误）{
警报（“错误：+Error.code+”“+Error.message”）；
}
});
};
函数刷新（timeoutPeriod）{
refresh=setTimeout（函数（）{window.location.reload（true）；}，timeoutPeriod）；
}
$（文档）.ready（函数（）{
获取照片（）；
//刷新（10000）；
});

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

嘿，您犯了一个错误。这对我不起作用。然后我发现它是url（）而不是url。修改为img.src=results[i].get（“image”）.url（）


我的解析图像
初始化（“xxxxxxxxxxxx”，“xxxxxxxxxxxxxx”）；
变量配置={
parseAppId:'xxxxxxxxxxxxxxxx'，
parseRestKey:'xxxxxxxxxxxxxxxx'，
streamName:'解析演示'
};
var getPhotos=function（）{
var userImages=Parse.Object.extend（“userImages”）；
var query=newparse.query（userImages）；
查询.查找({
成功：功能（结果）{
$（“#照片容器”）.children（）.remove（）；
对于（var i=results.length-1；i>=0；i--）{
var img=新图像（）；
img.src=results[i].get（“image”）.url（）；
img.className=“照片”；
文件.正文.附件（img）；
} 
},
错误：函数（错误）{
警报（“错误：+Error.code+”“+Error.message”）；
}
});
};
函数刷新（timeoutPeriod）{
refresh=setTimeout（函数（）{window.location.reload（true）；}，timeoutPeriod）；

}

$（文档）.ready（函数（）{

获取照片（）

//刷新（10000）

}))

你可以在这里找到IE的博客文章：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);