Question

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

http://www.ttmt.org.uk/forum/gallery2/

http://jsfiddle.net/ttmt/tmyqj/11/

我一直在努力做到这一点，我不知道如果我的想法完全错了。

我有一个在页面上浮动的图像列表。

我希望图像从左到右一次加载一个。当一个图像完全加载时，下一个图像将开始。

我已经尝试了其他预加载的想法，但它们似乎都预先加载了所有图像，因此我等待所有图像加载。

我的想法是将所有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>

Answer 1

您可以使用此library，我在我的项目中使用它。

jQuery - 检查图像已加载

1 个答案: