0

I have a demo here to illustrate my question.

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

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

I've been trying to do this all day, I don't know If I've got completely the wrong idea.

I have a list of images that are floated right off the page.

I would like the images to load one at a time from left to right. When one image is completely loaded the next will start.

I've tried other preloading ideas but they all seem to preload all the images so I'm waiting for all the images to load.

My idea was to place all the li's in an array then delete the li's from the page, I could then add the li back one at a time check the image had loaded then load the next li.

This sort of works but the images still load randomly and I can't work out how to check if the image has loaded before adding the next.

Is this a stupid way of doing this?

Can I check if an image has completely loaded.

    <!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>
ttmt
  • 5,822
  • 27
  • 106
  • 158
  • Maybe you're looking for [**.error()**](http://api.jquery.com/error/) – adeneo Nov 26 '12 at 20:52
  • Why do you want to do this? – Diodeus - James MacFarlane Nov 26 '12 at 20:53
  • If you use the window `onload` event instead of document ready it won't be called until all images have loaded. Also, instead of having your function call itself directly you should use `setTimeout(rePopulate, 100)` so that there is a delay between (re)displaying each image - otherwise they'll all be appended simultaneously as far as the user can tell. – nnnnnn Nov 26 '12 at 20:54
  • 2
    If the images are in the DOM, they'll begin loading immediately before you delete them from the page. The only way to prevent that is to not include them in the DOM to begin with. – Kevin B Nov 26 '12 at 20:54
  • possible duplicate of [jQuery callback on image load (even when the image is cached)](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) – Blazemonger Nov 26 '12 at 20:59
  • Try this: http://jsfiddle.net/tmyqj/12/ – nnnnnn Nov 26 '12 at 21:00
  • Diodeus - I'd like to load the images sequential from left to right. – ttmt Nov 26 '12 at 22:08

1 Answers1

1

You can use this library, I used it in my projects.

Alexandru Chelariu
  • 477
  • 2
  • 7