使用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数据库的图像的简单方法

回答

相关问题