나하고 싶어:
$("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
}
});
답변
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
});
