j이미지 로드 시 콜백 쿼리(이미지가 캐시된 경우에도 마찬가지)

j이미지 로드 시 콜백 쿼리(이미지가 캐시된 경우에도 마찬가지)

수행할 작업:

$("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 버전 로드가 완료되는 시간과 동일해야 합니다.

Javascript:

$(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');
})

온로드 전후에 소스를 설정합니다.

imject가 정의된 후 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이 있는 IE에 문제가 있었습니다.너비가 정의되지 않았습니다.로드 이벤트가 발생하지만 IE에서 이미지의 치수를 가져올 수 없습니다(크롬 + 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

코데펜 예제

코드펜 LESS 예제

언급URL : https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached