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 を必要とするため、IE からアプリにアクセスするには、HTTPS を使用してアプリをホストする必要もあります。

于 2013-04-18T20:41:20.543 に答える
0

ねえ、あなたは 1 つの間違いを犯しました。それは私のために働いていませんでした。次に、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();

// リフレッシュ(10000);

});

于 2014-05-19T07:11:56.487 に答える