복붙노트

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

JQUERY

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

해결법

  1. 1.SRC에 이미 설정되어있는 경우에도 바인딩 이벤트 핸들러를 얻기 전에, 이벤트는 캐시 된 경우에 발사된다. 이 문제를 해결하려면, 당신은 확인하고 이벤트를 트리거를 통해 루프는 다음과 같이 .complete 기반으로 할 수 있습니다 :

    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에서의 변화를합니다.

  2. 2.난 당신이 아닌 DOM 이미지 객체로 다시로드하는 것이 좋습니다 수 있습니까? 이 캐시 된 경우에, 이것은 전혀 시간이 걸릴 것, 그리고 온로드는 여전히 실행됩니다. 이 캐시되지 않은 경우 이미지가 로딩 될 때, 이미지 완료로드의 DOM 버전과 동일한 시간 일해야하는의 온로드를 발사합니다.

    난 당신이 아닌 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') ;
    }) ;
}) ;

  3. 3.내 간단한 솔루션, 그것은 외부 플러그인을 필요로하지 않으며, 일반적인 경우에 충분해야한다 :

    내 간단한 솔루션, 그것은 외부 플러그인을 필요로하지 않으며, 일반적인 경우에 충분해야한다 :

    /**
 * 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);
});

  4. 4.당신은 정말 jQuery를 함께 할해야합니까? 당신은 당신의 이미지에 직접 온로드 이벤트뿐만 아니라 첨부 할 수 있습니다;

    당신은 정말 jQuery를 함께 할해야합니까? 당신은 당신의 이미지에 직접 온로드 이벤트뿐만 아니라 첨부 할 수 있습니다;

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

    그것은 캐시에서 여부, 이미지를로드 할 때마다 실행됩니다.

  5. 5.또한로드 오류에 대한 지원이 코드를 사용할 수 있습니다 :

    또한로드 오류에 대한 지원이 코드를 사용할 수 있습니다 :

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

  6. 6.난 그냥이 문제를 자신했다 내 캐시를 죽이거나 플러그인을 다운로드 포함하지 않은 솔루션을 모든 곳에서 검색.

    난 그냥이 문제를 자신했다 내 캐시를 죽이거나 플러그인을 다운로드 포함하지 않은 솔루션을 모든 곳에서 검색.

    내가 여기에 게시 가치가 흥미로운 수정하고 (내 생각)입니다 대신 다른 뭔가를 발견, 그래서 나는 즉시이 스레드를 보지 못했다 :

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

    실제로 여기에 코멘트에서이 아이디어를 가지고 : http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

    작동하지만 IE7에서이 작업을 테스트 한 지금 작동하기 전에 파산 어디 내가 왜 아무 생각이 없습니다.

    희망이 도움이,

    허용 대답은 실제로 이유를 설명 :

  7. 7.이미지의 SRC 가지는 새로운 이미지를 생성하도록 jQuery를 사용하고, 그 직접로드 할당 방법에 의해, 부하 방법은 성공적으로 완료 jQuery를 새로운 이미지를 생성 할 때 호출된다. 이것은 IE 8, 9, 10에 나를 위해 노력하고 있습니다

    이미지의 SRC 가지는 새로운 이미지를 생성하도록 jQuery를 사용하고, 그 직접로드 할당 방법에 의해, 부하 방법은 성공적으로 완료 jQuery를 새로운 이미지를 생성 할 때 호출된다. 이것은 IE 8, 9, 10에 나를 위해 노력하고 있습니다

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

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

    내가 찾은 해결책 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;

  9. 9.GUS의 예에 대한 수정 :

    GUS의 예에 대한 수정 :

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

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

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

  10. 10.예 : img 객체가 정의 된 후에 그냥 별도의 줄에의 src 인수를 다시 추가합니다. 이 젊은이-이벤트를 트리거로 IE를 속여 것입니다. 그것은 추한이지만, 지금까지 발견 한 가장 간단한 해결 방법입니다.

    예 : img 객체가 정의 된 후에 그냥 별도의 줄에의 src 인수를 다시 추가합니다. 이 젊은이-이벤트를 트리거로 IE를 속여 것입니다. 그것은 추한이지만, 지금까지 발견 한 가장 간단한 해결 방법입니다.

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

  11. 11.당신이 이런 식으로 할 것인지 나는 당신에게 약간의 팁을 제공 할 수 있습니다 :

    당신이 이런 식으로 할 것인지 나는 당신에게 약간의 팁을 제공 할 수 있습니다 :

    <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 없습니다 그렇게한다면.

  12. 12.나는 e.target.width가 정의 될 IE로이 문제를 가지고 있었다. 로드 이벤트가 해고하지만 IE에서 이미지의 크기를 가져올 수 없습니다 (크롬 + FF는했다).

    나는 e.target.width가 정의 될 IE로이 문제를 가지고 있었다. 로드 이벤트가 해고하지만 IE에서 이미지의 크기를 가져올 수 없습니다 (크롬 + FF는했다).

    당신 밝혀이 e.currentTarget.naturalWidth & e.currentTarget.naturalHeight를 찾을 필요가있다.

    다시 한번, IE는 그 자체가 (더 복잡) 방식으로 일을한다.

  13. 13.또한 (페이지 성능 개선) 게으른로드 이미지를 수 있습니다 감옥 플러그인을 사용하여 매개 변수로 콜백을 전달하여 문제를 해결할 수

    또한 (페이지 성능 개선) 게으른로드 이미지를 수 있습니다 감옥 플러그인을 사용하여 매개 변수로 콜백을 전달하여 문제를 해결할 수

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

    html로 같은 보일 것입니다

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

  14. 14.당신이 순수 CSS 솔루션을 원하는 경우,이 트릭은 아주 잘 작동 - 변환 객체를 사용합니다. 그들은 캐시 또는하지 않을 경우에도 이미지와 함께 작동합니다 :

    당신이 순수 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 예

    Codepen LESS 예

    15. from https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법  (0) 2020.09.23
[JQUERY] 왜 페이지로드 즉시 클릭 이벤트 처리기 화재는 무엇입니까?  (0) 2020.09.23
[JQUERY] JQuery와 APPEND SVG 요소와 작동하지?  (0) 2020.09.23
[JQUERY] 어떻게입니다 onbeforeunload 대화 상자를 무시하고 내 자신으로 대체 할 수 있습니까?  (0) 2020.09.23
[JQUERY] 어떻게 jQuery를 또는 일반 자바 스크립트를 사용하여 매개 변수 URL을 얻으려면?  (0) 2020.09.23
,

티스토리툴바