jquery 이벤트가 일단 모든 이미지가로드되면 (캐시 ​​된 이미지 포함)?

Question

나는이 페이지에 ajaxing와 모든 이미지가로드 만 일단을 보여주는위한 다음과 같은 기능 :

$.get('target-page.php', function(data){  
    var $live = $('#preview_temp_holder').html(data); 
    var imgCount = $live.find('img').length; 
    $('img',$live).load(function(){ 
     imgCount--; 
     if (imgCount==0){ 
      //DO STUFF HERE ONCE ALL IMAGES ARE LOADED 
      $('#preview_pane').html($live.children()).fadeIn(800); 
      $live.children().remove();    
     } 
    });     
}); 

문제는 캐시 된 이미지가 .load() 이벤트를 트리거하지 따라서 imgCount을 감소시키는하지와 함께 제공 .

나는 Nick Craver's solution을 구현해야하지만 어떻게해야할지 모르겠다. 누구든지 나를 도울 수 있습니까?

Answer 1

그들 병합 얻을 관리 :

$.get('target-page.php', function(data){  
    var $live =   $('#preview_temp_holder').html(data); 
    var $imgs =   $live.find('img') 
    var imgCount =  $imgs.length;    

    $imgs.one('load', function() {   
     imgCount--; 
     if (imgCount==0){ 
      //DO STUFF HERE 
      //ALL IMAGES ARE LOADED 
      $('#preview_pane').html($live.children()).fadeIn(800); 

     }   
    }) 
    .each(function() { 
     if(this.complete){ 
      $(this).load(); 
     } 
    }); 
}); 

참고 : 404 - 보내고 영상이 휴식 것입니다.

Answer 2

변경 :

$live.find('img').each(function() { 
    if(this.complete) $(this).load(); 
}); 

은 일반적으로 내가 이전 카운트 문에서 $live.find('img')를 다시 사용하는 것이 좋습니다 :

$('img',$live).one('load', function(){ 
    ... 
}); 

그리고 위의 APPEND 후

. 좋아

Answer 3

나는이 문제를 해결하기 위해 오랜 시간을 보냈습니다. 파이어 폭스에서 jQuery API 페이지 (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js)에서 제안 된 플러그인이 작동하지 않았습니다.

내 솔루션은 각 이미지를 반복하고 이미로드되지 않은 경우 (즉 브라우저에서 캐시 된 경우)에만로드 이벤트를 추가하는 것이 었습니다. 이 솔루션으로 문제를 발견하는 경우 제발 있도록

$(document).ready(function() { 

    var images = $("img.lazy"); 
    $(".image-wrapper").addClass("loading"); 

    var loadedCount = 0; 
    images 
     .hide() 
     .each(function() { 
      if (!this.complete) { 
       $(this).load(function() { 
        loadedCount++; 
        console.log(loadedCount); 
        displayImage(this); 
       }); 
      } 
      else { 
       displayImage(this); 
      } 
     }); 
}); 

function displayImage(img) { 
    $(img).fadeIn(300, function() { 
     $(this).parents(".image_wrapper").removeClass("loading"); 
    }); 
} 

내가 더 자바 스크립트 전문가는 아니지만 : 아래의 코드는 내가 그로드 이벤트 만 캐시에 이미 이미지를 발사했다 확인하기 위해 사용 된 카운터를 포함 저에게 알려주세요. 내가 말했듯이 IE8, Chrome 및 Firefox (IE의 이전 버전은 확실하지 않음)에서 작동합니다.