jQuery-检查图像是否已加载_Jquery_Image_Loaded

jQuery-检查图像是否已加载

jquery image

jQuery-检查图像是否已加载,jquery,image,loaded,Jquery,Image,Loaded,我这里有一个演示来说明我的问题我一整天都在试着这么做，我不知道我是不是完全错了我有一个图像列表，这些图像在页面上浮动我想从左到右一次加载一个图像。当一个映像完全加载时，下一个映像将启动我尝试过其他的预加载方法，但它们似乎都预加载了所有的图像，所以我正在等待所有的图像加载我的想法是将所有li放置在一个数组中，然后从页面中删除li，然后一次添加一个li，检查图像是否已加载，然后加载下一个li 这类工作，但图像仍然随机加载，我无法确定如何在添加下一个之前检查图像是否已加载这是一种愚蠢的

我这里有一个演示来说明我的问题

我一整天都在试着这么做，我不知道我是不是完全错了

我有一个图像列表，这些图像在页面上浮动

我想从左到右一次加载一个图像。当一个映像完全加载时，下一个映像将启动

我尝试过其他的预加载方法，但它们似乎都预加载了所有的图像，所以我正在等待所有的图像加载

我的想法是将所有li放置在一个数组中，然后从页面中删除li，然后一次添加一个li，检查图像是否已加载，然后加载下一个li

这类工作，但图像仍然随机加载，我无法确定如何在添加下一个之前检查图像是否已加载

这是一种愚蠢的做法吗

我可以检查图像是否已完全加载

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <head>
      <title>Title of the document</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">
        #header{
          position:fixed;
          margin:20px 0 0 20px;
        }
        #header #logo{
          width:100px;
          height:80px;
          background:red;
        }
        ul#gallery {
            margin:120px 0 0 0;
            float:left;
            height:500px;
            margin-right:-20000px;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          height:100%;
        }

      </style>

      </head>

    <body>

      <div id="header">
        <div id="logo">

        </div><!-- #logo -->
      </div><!-- #header -->

      <ul id="gallery">
        <li><a href=""><img src="images/01.jpg" /></a></li>
        <li><a href=""><img src="images/02.jpg" /></a></li>
        <li><a href=""><img src="images/03.jpg" /></a></li>
        <li><a href=""><img src="images/04.jpg" /></a></li>
        <li><a href=""><img src="images/05.jpg" /></a></li>
        <li><a href=""><img src="images/06.jpg" /></a></li>
        <li><a href=""><img src="images/07.jpg" /></a></li>
        <li><a href=""><img src="images/08.jpg" /></a></li>
        <li><a href=""><img src="images/09.jpg" /></a></li>
        <li><a href=""><img src="images/10.jpg" /></a></li>
        <li><a href=""><img src="images/11.jpg" /></a></li>
        <li><a href=""><img src="images/13.jpg" /></a></li>
        <li><a href=""><img src="images/14.jpg" /></a></li>
        <li><a href=""><img src="images/15.jpg" /></a></li>
      </ul>


    <script>


      $(function(){

        var imgArr=[];

        var lis = $('#gallery li')

        lis.each(function(){
          imgArr.push(this.outerHTML);
          $(this).remove();
        })

        window.ili = 0;

        rePopulate();//Add the li's back one at a time.

        function rePopulate(){
          var newli = $('#gallery').append(imgArr[ili]);
          var newImg = newli.find('img');
          //console.log(newImg);
          if(window.ili<=imgArr.length){
            //Need to check here if the image has loaded completely before loading the next 
            window.ili++;
            rePopulate();
          }
        } 
      })

      </script>
    </body>

    </html>


文件标题
#标题{
位置：固定；
利润率：20px 0 0 20px；
}
#标题#标志{
宽度：100px；
高度：80px；
背景：红色；
}
美术馆{
利润率：120px0；
浮动：左；
高度：500px；
右边距：-20000px；
}
ul#李画廊{
显示：内联；
}
ul#li img画廊{
浮动：左；
身高：100%；
}
















$（函数（）{
var imgArr=[]；
var lis=$（'李画廊'）
lis.each（函数（）{
imgArr.push（this.outerHTML）；
$（this.remove（）；
})
window.ili=0；
重新填充（）；//一次添加一个li的背部。
函数重新填充（）{
var newli=$（“#gallery”）.append（imgArr[ili]）；
var newImg=newli.find（'img'）；
//console.log（newImg）；
如果（window.ili您可以使用它，我在我的项目中使用了它。
也许您正在寻找为什么要这样做？如果您使用windowonload
事件而不是document ready，则在所有图像加载之前不会调用它。此外，您应该使用setTimeout（rePopulate，100）来代替函数直接调用自身
以便在（re）之间存在延迟显示每个图像-否则将尽用户所能同时追加所有图像。如果图像在DOM中，则在您从页面中删除它们之前，它们将立即开始加载。防止这种情况发生的唯一方法是不首先将它们包括在DOM中。可能的图像重复加载检查下载、缓存和一个很棒的插件