jquery html（數組）不插入數組中的所有項目

當我運行下面的JavaScript代碼時，它會從Flickr加載指定數量的圖像。jquery html（數組）不插入數組中的所有項目

通過var photos = photoGroup.getPhotos（10）代碼，我從緩存中獲得10張圖片。

然後，通過檢查console.log（照片）;我可以看到對象正好有10個項目。

但實際的形象出現在頁面上少於10個項目......

我不知道爲什麼會以這種方式工作..

預先感謝您。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
<script> 
    var PhotoGroup = function(nativePhotos, callback) { 
     var _cache = new Array(); 

     var numberOfPhotosLoaded = 0; 
     var containerWidth = $("#contents").css('max-width'); 
     var containerHeight = $("#contents").css('max-height'); 

     $(nativePhotos).each(function(key, photo) { 
      $("<img src='"+"http://farm" + photo["farm"] + ".staticflickr.com/" + photo["server"] + "/" + photo["id"] + "_" + photo["secret"] + "_b.jpg"+"'/>") 
       .attr("alt", photo['title']) 
       .attr("data-cycle-title", photo['ownername']) 
       .load(function() { 
        if(this.naturalWidth >= this.naturalHeight) { 
         $(this).attr("width", containerWidth); 
        } else { 
         $(this).attr("height", containerHeight); 
        } 

        _cache.push(this); 

        if(nativePhotos.length == ++numberOfPhotosLoaded) 
         callback(); 
       }) 
     }); 

     var getRandom = function(max) { 
      return Math.floor((Math.random()*max)+1); 
     } 

     this.getPhotos = function(numberOfPhotos) { 
      var photoPool = new Array(); 
      var maxRandomNumber = _cache.length-1; 

      while(photoPool.length != numberOfPhotos) { 
       var index = getRandom(maxRandomNumber); 

       if($.inArray(_cache[index], photoPool)) 
        photoPool.push(_cache[index]); 
      } 

      return photoPool; 
     } 
    } 

    var Contents = function() { 
     var self = this; 
     var contentTypes = ["#slideShowWrapper", "#video"]; 

     var switchTo = function(nameOfContent) { 
      $(contentTypes).each(function(contentType) { 
       $(contentType).hide(); 
      }); 

      switch(nameOfContent) { 
       case("EHTV") : 
        $("#video").show(); 
        break; 
       case("slideShow") : 
        $("#slideShowWrapper").show(); 
        break; 
       default : 
        break; 
      } 
     } 

     this.startEHTV = function() { 
      switchTo("EHTV"); 

      document._video = document.getElementById("video"); 
      document._video.addEventListener("loadstart", function() { 
       document._video.playbackRate = 0.3; 
      }, false); 
      document._video.addEventListener("ended", startSlideShow, false); 
      document._video.play(); 
     } 

     this.startSlideShow = function() { 
      switchTo("slideShow"); 
      var photos = photoGroup.getPhotos(10) 
      console.log(photos); 
      $('#slideShow').html(photos); 
     } 

     var api_key = '6242dcd053cd0ad8d791edd975217606'; 
     var group_id = '[email protected]'; 
     var flickerAPI = 'http://api.flickr.com/services/rest/?jsoncallback=?'; 
     var photoGroup; 

     $.getJSON(flickerAPI, { 
      api_key: api_key, 
      group_id: group_id, 
      format: "json", 
      method: "flickr.groups.pools.getPhotos", 
     }).done(function(data) { 
      photoGroup = new PhotoGroup(data['photos']['photo'], self.startSlideShow); 
     }); 

    } 

    var contents = new Contents(); 
</script> 
</head> 
<body> 
<div id="slideShow"></div> 
</body> 
</html>

來源

2014-01-26 Jake Jeon

我修復根據this article你的方法getRandom（），和完全重新編寫方法getPhotos（）：

this.getPhotos = function(numberOfPhotos) { 
     var available = _cache.length; 
     if (numberOfPhotos >= available) { 
      // just clone existing array 
      return _cache.slice(0); 
     } 

     var result = []; 
     var indices = []; 

     while (result.length != numberOfPhotos) { 
      var r = getRandom(available); 
      if ($.inArray(r, indices) == -1) { 
       indices.push(r); 
       result.push(_cache[r]); 
      } 
     } 

     return result; 
    }

檢查完整的解決方案在這裏：http://jsfiddle.net/JtDzZ/

但是這種方法仍然緩慢，因爲由於發生相同的隨機數，循環可能會相當長。

如果您關心性能，您需要創建其他穩定的解決方案。例如，只對圖像序列的第一個索引進行隨機化。

來源

2014-01-26 13:45:23

謝謝Nataliia。 getRandom方法是否出現較少的項目？ –

jquery html（數組）不插入數組中的所有項目

回答

相關問題