0

我在这里有一个演示 - http://www.ttmt.org.uk/forum/gallery

和 jsfiddle 来说明我的问题 - http://jsfiddle.net/ttmt/tmyqj/6/

它只是一个简单的图像列表，它们从页面上浮动。

我想从左到右依次加载图像。

我已经这样做了：

    $(document).ready(function() {
      var lis = $('li').hide();

      var i=0;   

      function displayImg(){
        lis.eq(i++).fadeIn(200, displayImg);
      } 

      displayImg();    

    })

此代码有效，但我想一次加载一个图像，因此我需要在加载下一个图像之前检查图像是否已加载。

我试过这个，但它只加载第一个图像。

    $(document).ready(function() {
        var lis = $('li').hide();

        var i=0;   

        function displayImg(){
          lis.eq(i).fadeIn(200, checkLoad);
        } 

        function checkLoad(){
          if(lis.eq(i).complete){
            i++;
            displayImg();
          }else{
            alert('img not load');
          }
        }

        displayImg();    

      })

如何在加载下一个图像之前检查图像是否已加载？

4

2 回答 2

1 
$(function() { // A shortcut for $(document).ready(function() {})
  var lis = $('li').hide();

  var displayImages = function(startIndex) {
    var li = lis.eq(startIndex);
    if (li.length) {
      li.fadeIn(200, function() {
        li.find('img').load(function() {
          displayImages(startIndex + 1);
        });
      });
    }
  }

  displayImages(1);

});
于 2012-11-26T13:02:18.020 回答
1

我会使用（我会让你把它放在循环中！）：

 objImage = new Image();
 objImage.src='images/theimage.jpg';
 objImage.onLoad = imageLoaded();

 function imagesLoaded()
 {    
     //image is loaded, append it as per usual...
 }

显然这需要一些改进，但它应该能让你继续前进；）

编辑
或者，您可以使用这个 jQuery 插件来预加载图像：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

或者

http://www.jqueryin.com/projects/spinner-jquery-preloader-plugin/#about

于 2012-11-26T12:46:30.763 回答