이미지로드시 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
});

내가 찾은 해결책 https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (이 코드는 주석에서 직접 가져 왔습니다)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

GUS의 예에 대한 수정 :

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

온로드 전후에 소스를 설정하십시오.

img oject가 정의 된 후 별도의 행에 src 인수를 다시 추가하십시오. 이것은 IE를 속여 이벤트를 트리거하도록 속입니다. 추악하지만 지금까지 내가 찾은 가장 간단한 해결 방법입니다.

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

당신이 이것을 원한다면 나는 당신에게 작은 팁을 줄 수 있습니다 :

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

브라우저가 사진을 캐시 할 때 그렇게하면 항상 img가 표시되지만 실제 그림 아래에 img를로드하는 데 아무런 문제가 없습니다.

e.target.width가 정의되지 않은 IE 에서이 문제가 발생했습니다. 로드 이벤트가 발생하지만 IE에서 이미지의 크기를 가져올 수 없습니다 (chrome + FF 작동).

당신 밝혀 찾는다 필요 e.currentTarget.naturalWidth & e.currentTarget.naturalHeight .

다시 한 번, IE는 자신의 (더 복잡한) 방식으로 작업을 수행합니다.

JAIL 플러그인을 사용하여 이미지로드 지연 (페이지 성능 향상) 및 콜백 을 매개 변수로 전달할 수있는 문제점을 해결할 수 있습니다.

$('img').asynchImageLoader({callback : function(){...}});

HTML은 다음과 같아야합니다

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

순수한 CSS 솔루션을 원한다면이 트릭이 잘 작동합니다. 변환 객체를 사용하십시오. 이미지가 캐시되거나 캐시되지 않은 경우에도 작동합니다.

CSS :

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML :

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

코드 펜 예

Codepen LESS 예