Question

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

并说明我的问题 - 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();    

      })

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

Answer 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

Answer 2

$(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);

});

jQuery：检查图像是否已加载 - 顺序图像加载

2 个答案: