0

ここにデモがあります - http://www.ttmt.org.uk/forum/gallery

そして私の質問を説明するためのjsfiddle - 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();    

    })

このコードは機能しますが、一度に 1 つの画像を読み込みたいので、次の画像を読み込む前に画像が読み込まれたかどうかを確認する必要があります。

私はこれを試しましたが、最初の画像しかロードしません。

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

      })

次の画像をロードする前に、画像がロードされたかどうかを確認するにはどうすればよいですか?

4

2 に答える 2

1

私は使用します（ループに入れてみましょう！）：

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

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

明らかに、これにはいくらかの改良が必要ですが、それでうまくいくはずです ;)

EDIT
または、この 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

于 2012-11-26T12:46:30.763 に答える
1 
$(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);

});
于 2012-11-26T13:02:18.020 に答える