5

私は自分のサイトの無限スクロールのスクリプトを実行しています:

$(window).scroll(function(){
  if($(window).scrollTop() == $(document).height() - $(window).height()){
    ...
    $.ajax({
      ...
      success: function(json) {if(json.success){
        ...
        // here I append an Ajax @response with a new element to my existing HTML
        $("#mindIndexSummaryFirst").append(json.items1);
        $("#mindIndexSummarySecond").append(json.items2);
        $("#mindIndexSummaryThird").append(json.items3);
        // here I try to check whether all images are loaded
        $("#mindIndexSummary img").on('load', function(){
          // and I need to call two functions on loaded element
          // hoverImg() need the loaded image to calculate the height
          $('.pi-hover-img'+json.course).hoverImg();
          $(".popup3").tooltip();
        });
      }
    ...
  });

読み込まれた HTML 要素は次のとおりです。

<div class="page-item pi-hover-img  pi-normal">
  <a class="overlayPop" href="#">
  <a class="item_uri" id="course153" href="#">
    <img src="/public/file/course/image/153-course.png" class="pi-item-image">
  </a>
  <a href="#" class="popup5 hide-text" style="display: none;">
    <img src="/public/file/account/image/282-user.jpeg" class="item_image">
  </a>
  <a class="popup action-button big_interested " id="course_153" href="javascript:;" style="top: -162.5px; left: 83.5px; display: none;"> Mi interessa</a>
  <a href="javascript:;">Description</a>
  <a class="popup4 hide-text" href="javascript:;">Preview</a>
  <span class="popup2" style="display: none;">1€&lt;/span>
  <a href="/course/153/gestire-un-pubblico">
    <h2 style="top: 320px;">Gestire un pubblico</h2>
    <span class="rfloat pi-icon">
      <img src="/public/img/site_icon/video_course_black.png">
    </span>
    <div class="clearfix"></div>
  </a>
</div>

5要素、15枚の画像を読み込んでいますが、読み込める要素が少なくなる可能性があります。

問題は、関数が複数回呼び出されたことです (アラートでこれをテストします)。関数がイメージの読み込み後に呼び出されたことを確認できません。

誰かが同じ状況にあった場合は、私に何か提案してください (PS 下手な英語で申し訳ありません)。

4

4 に答える 4

6 
$("#mindIndexSummary img").on('load', function(){ });

クエリに一致する各画像にハンドラーをアタッチします。そのため、各画像は、すべての読み込みが完了したときに一度ではなく、読み込まれたときに関数を起動します。

すべての画像が読み込まれたかどうかを判断するには、読み込まれた画像を追跡する必要があります。

次の行に沿って：

var noOfImages = $("#mindIndexSummary img").length;
var noLoaded = 0;

$("#mindIndexSummary img").on('load', function(){ 

    noLoaded++;
    if(noOfImages === noLoaded) {
        handleAllLoaded();
    }

});
于 2013-05-10T15:45:03.627 に答える
0

画像の読み込みイベントは少し信頼できません ( http://api.jquery.com/load-event/の Jquery ドキュメントを参照してください)。そうは言っても、選択したすべての画像の読み込みイベントを個別にチェックすることで、ソリューションを組み立てることができます。イメージがキャッシュされているか、実行時にすでにロードされている可能性があります。この場合、画像要素には「.complete」属性が必要です。

アプローチを説明する小さな jQuery プラグインを作成しました (とにかく、より完全なものがあります)。

(function($) {
    $.fn.imagesLoaded = function(options) {
        var images = this.find("img"), 
            loadedImages = [], 
            options = options;

        images.each(function(i, image) {
            function loaded() {
                loadedImages.push(this);
                if(options.imageLoaded) {
                    options.imageLoaded(this);    
                }
                if(loadedImages.length == images.length) {
                    if(options.complete) {
                        options.complete(loadedImages);    
                    }
                }
            }

            if(image.complete || image.complete === undefined) {
                // Image is already loaded
                loaded.call(image);               
            } else {
                // Image is not loaded yet, bind event
                $(image).load(loaded);
            }
        });
    }
})(jQuery);

プラグインは 2 つのコールバックでハッシュを受け入れます。1 つは画像が読み込まれるたびに起動し (画像はパラメーターとして渡されます)、もう 1 つはすべての画像が読み込まれたときに起動されます (画像の配列がパラメーターとして渡されます)。

$("#element-containing-images").imagesLoaded({
    imageLoaded: function(image) {
       console.log("Image loaded:", image); 
    }, 
    complete: function(images) {
        console.log("All images loaded:", images);
    }
});

すべての癖を網羅しているわけではありませんが、一般的なアイデアは得られるはずです。http://jsfiddle.net/GYJGK/で利用できる小さなデモを作成しました。

于 2013-05-10T16:36:56.547 に答える