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

我这里有一个演示-

为了说明我的问题-

这只是一个简单的图片列表，可以直接从页面上浮动

我想从左到右顺序加载图像

我是这样做的：

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

      })

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

我将使用（我让您将其放入循环中！）：

显然，这需要一些改进，但它应该会让您继续；）

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

或

---

Aleksandr您的代码对我不起作用，它只是加载了第一个图像。

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

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

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

});