[jquery] 이미지로드시 jQuery 콜백 (이미지가 캐시 된 경우에도)

나하고 싶어:

$("img").bind('load', function() {
  // do stuff
});

그러나 이미지가 캐시에서로드 될 때로드 이벤트가 발생하지 않습니다. jQuery 문서 는 이 문제를 해결하기 위해 플러그인 을 제안 하지만 작동하지 않습니다.

답변

src이 이미 설정되어 있으면 이벤트 처리기가 바인딩되기 전에 캐시 된 사례에서 이벤트가 시작됩니다. 이 문제를 해결하려면 다음과 같이 이벤트 기반 점검 및 트리거를 반복 .complete하십시오.

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

에서 변경 참고 .bind()로 .one()이벤트 핸들러가 두 번 실행하지 않도록합니다.

답변

DOM이 아닌 이미지 객체로 다시로드 할 것을 제안 할 수 있습니까? 캐시 된 경우 시간이 전혀 걸리지 않으며 온로드는 계속 실행됩니다. 캐시되지 않은 경우 이미지가로드 될 때 온로드를 발생 시키며, 이는 이미지의 DOM 버전이로드를 완료하는 시간과 같아야합니다.

자바 스크립트 :

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

업데이트 됨 (여러 이미지를 처리하고 올바르게 정렬 된 온로드 첨부 파일로) :

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

답변

내 간단한 솔루션, 외부 플러그인이 필요하지 않으며 일반적인 경우 충분합니다.

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

다음과 같이 사용하십시오.

onImgLoad('img', function(){
    // do stuff
});

예를 들어,로드시 이미지를 페이드하려면 다음을 수행하십시오.

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

또는 jquery 플러그인과 같은 접근 방식을 선호하는 경우 :

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

그리고 이런 식으로 사용하십시오 :

$('img').imgLoad(function(){
    // do stuff
});

예를 들면 다음과 같습니다.

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

답변

실제로 jQuery와 함께해야합니까? onload이벤트를 이미지에 직접 첨부 할 수도 있습니다.

<img src="/path/to/image.jpg" onload="doStuff(this);" />

캐시에서 이미지가로드 될 때마다 실행됩니다.

답변

로드 오류를 지원하여이 코드를 사용할 수도 있습니다.

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

답변

방금이 문제가 있었고 캐시를 죽이거나 플러그인을 다운로드하지 않는 솔루션을 어디서나 검색했습니다.

나는이 스레드를 즉시 보지 못했기 때문에 대신 재미있는 수정이며 여기에 게시 할 가치가있는 다른 것을 발견했습니다.

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

나는 실제로 여기에 의견 에서이 아이디어를 얻었다 : http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

나는 그것이 왜 작동하는지 모르겠지만 IE7에서 이것을 테스트했으며 그것이 작동하기 전에 어디에서 깨졌습니까?

도움이 되길 바랍니다.

편집하다

허용 된 답변은 실제로 다음과 같은 이유를 설명합니다.

src가 이미 설정되어 있으면 이벤트 핸들러를 바인드하기 전에 이벤트가 캐시에서 발생합니다.

답변

jQuery를 사용하여 이미지의 src로 새 이미지를 생성하고 그에 직접로드 메소드를 지정하면 jQuery가 새 이미지 생성을 마치면로드 메소드가 성공적으로 호출됩니다. 이것은 IE 8, 9 및 10에서 나를 위해 일하고 있습니다.

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});