jQuery에게 무언가를 실행하기 전에 모든 이미지가로드되기를 기다리는 공식적인 방법

641

이것을 할 때 jQuery에서 :

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

DOM이로드 될 때까지 기다렸다가 코드를 실행합니다. 모든 이미지가로드되지 않은 경우 여전히 코드를 실행합니다. 요소 표시 또는 숨기기 또는 이벤트 첨부와 같은 DOM 항목을 초기화하는 경우 분명히 원하는 것입니다.

애니메이션을 원하고 모든 이미지가로드 될 때까지 애니메이션을 실행하고 싶지 않다고 가정 해 봅시다. jQuery에 공식적인 방법이 있습니까?

내가 가진 가장 좋은 방법은 사용하는 것입니다 <body onload="finished()"> 것이지만, 내가하지 않으면 정말로하고 싶지 않습니다.

참고 : Internet Explorer의 jQuery 1.3.1 에는 실제로 코드를 실행하기 전에 모든 이미지가로드 될 때까지 기다리는 버그가 있습니다 $function() { }. 따라서 해당 플랫폼을 사용하는 경우 위에서 설명한 올바른 동작 대신 내가 찾고있는 동작이 나타납니다.

jquery 
— Simon_Weaver
소스
3
작동하지 $("img").load()않습니까?
— Lucas
1
치수 속성을 설정하면 해당 치수에 의존하는 준비된 기능으로 일부 코드를 안전하게 실행할 수 있다고 언급 할 가치가 있다고 생각합니다. PHP를 사용하면 업로드시 php.net/manual/en/function.getimagesize.php 를 사용하여 db로 저장하거나 브라우저로 출력하기 전에 가져올 수 있습니다 .
— Alqin
당신이 뭔가 놀라운 일을 원하는 경우, 다음 아래이 답변에서 언급 한 매우 좋은 & 인기 imagesloaded 자바 스크립트 라이브러리 확인 stackoverflow.com/a/26458347/759452을
— 아드 리앙은 수
"여기서 공식적인 방법 이외의 것을 발견하게되었습니다."
— 레온 펠티에

답변:

1035

jQuery를 사용 $(document).ready()하면 DOM 이로 드 $(window).on("load", handler)될 때 무언가를 실행하고 이미지와 같은 다른 모든 항목이로드 될 때 무언가를 실행하는 데 사용됩니다.

jollyrogerJPEG 파일 (또는 다른 적절한 파일) 이있는 경우 다음 완전한 HTML 파일에서 차이점을 볼 수 있습니다 .

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this
        <img src="jollyroger99.jpg">
    </body>
</html>

이를 통해 DOM이 해당 시점에 준비되었으므로 이미지가로드되기 전에 경고 상자가 나타납니다. 그런 다음 변경하면

$(document).ready(function() {

으로:

$(window).on("load", function() {

다음 경고 상자가 될 때까지 나타나지 않습니다 후 이미지가로드됩니다.

따라서 전체 페이지가 준비 될 때까지 기다리려면 다음과 같이 사용할 수 있습니다.

$(window).on("load", function() {
    // weave your magic here.
});
— 팍스 디아블로
소스
32
이마를 치면 +1은 완전히 잊어 버렸습니다. 이미지가 완료 될 때까지 $ (window) .load ()는 실행되지 않습니다.
— Paolo Bergantino
10
나는 똑같이했다. 심지어 나 자신을 알지 못하고 여전히 이해하지 못하는 대답을 읽으십시오.
— Rimian
24
참고 사항-이것은 Chromium에서 작동하지 않는 것 같습니다 (그리고 Chrome을 가정합니다). $ (window) .ready 이벤트는 이미지가 완성되기 전에 $ (document) .ready와 동일한 것으로 보입니다.
— Nathan Crause
24
하지만 $ (window) .load (function ())입니다.
— TJ-
3
@KyorCode IE의 이미지가 캐시 된 것이 아니라고 확신하십니까? 이 경우 "로드"이벤트가 전혀 발생하지 않습니다. 이 기사 는이 문제를 해결하는 데 도움 이 됩니다.
— Jamie Barker
157

이미지가 요소에로드 될 때 콜백을 시작하거나로드 된 이미지 당 한 번 실행할 수있는 플러그인을 작성했습니다.

$(window).load(function() { .. })확인할 셀렉터를 정의 할 수 있다는 점을 제외하고 와 비슷합니다 . 모든 이미지가 언제 표시되는지 알고 싶은 경우#content(예를 들어)의 로드 이것이 플러그인입니다.

또한 CSS와 같이 CSS에서 참조되는 이미지로드를 지원합니다 background-image.list-style-image 등

waitForImages jQuery 플러그인

사용법 예

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

jsFiddle의 예 .

더 많은 문서는 GitHub 페이지에 있습니다.

— 알렉스
소스
1
감사합니다!! $ .load ()는 나를 위해 작동하지 않았지만 이것은 트릭을 완벽하게 수행합니다.
— Fraxtil
Chrome 버전 22.0.1229.94와이 플러그인을 사용하고 waitFormImages 내에로드 된 이미지의 오프셋을 읽으려고했지만 ('img selector').each(function(index) { var offset = $(this).offset(); ...});offset.top은 여전히 ​​0입니다. 왜?
— basZero
1
@basZero 더 이상의 문맥없이 말하기가 어렵습니다. 이슈 페이지 에서 이슈를 제기 하십시오.
— alex
이미지가 카 카스 처리되면 작동하지 않습니다. any1이 해결 방법이 있습니까?
— Mandeep Jain
2
기본적으로 imagesLoaded와 유사하지만 srcsets에서도 작동합니다. 정확히 내가 찾던 것! 훌륭한 플러그인!
— Fabian Schöner
48

$(window).load()페이지가 처음로드 될 때만 작동합니다. 동적 작업을 수행하는 경우 (예 : 클릭 버튼, 새 이미지가로드 될 때까지 기다림) 작동하지 않습니다. 이를 달성하기 위해 내 플러그인을 사용할 수 있습니다.

데모

다운로드

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);
— Roko C. Buljan
소스
다만 경우에 누구는 BatchImagesLoad 플러그인에 사용 예제를 필요 : yankov.us/batchImageLoad
— 조나단 Marzullo
1
나는 무례하지는 않지만 플러그인의 신뢰성과 관련하여 귀하의 말에 의존 할 수는 없습니다. Yevgeniy Afanasyev답변 에서 언급했듯이 imagesLoaded는 이것에서 훨씬 더 잘 작동하며 언급 한 사용 사례를 다른 많은 사례와 함께 다룹니다 (해결 된 github 문제 참조) .
— Adrien Be
19

$(window).load실행 후 요청 된 단일 이미지의 다운로드 완료 알림을 받으려는 경우 이미지 요소의 load이벤트를 사용할 수 있습니다 .

예 :

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});
— 댄 파사로
소스
13

지금까지 어떤 대답도 가장 간단한 해결책으로 보이지 않았습니다.

$('#image_id').load(
  function () {
    //code here
});
— 코즈
소스
이것에 대한 좋은 점은 개별 이미지가로드되는 즉시 트리거하도록 할 수 있다는 것입니다.
— 톱 고양이
6

imagesLoaded.js자바 스크립트 라이브러리를 사용하는 것이 좋습니다 .

왜 jQuery를 사용하지 $(window).load()않습니까?

/programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951에 ansered

범위의 문제입니다. imagesLoaded, 당신은 이미지 세트를 대상으로 할 수있는 반면 $(window).load()목표 모든 자산 - 모든 이미지, 개체의 .js 및 .CSS 파일, 심지어 iframe을 포함. 대부분의 경우 이미지로드는 더 $(window).load()작은 자산 세트를 대상으로하기 때문에 보다 빨리 트리거됩니다 .

이미지로드를 사용해야하는 다른 좋은 이유

  • IE8 +에서 공식적으로 지원
  • 라이센스 : MIT 라이센스
  • 종속성 : none
  • 무게 (최소화 및 gzipped) : 7kb 축소 (경량!)
  • 다운로드 빌더 (무게를 줄이는 데 도움이 됨) : 필요 없음, 이미 작음
  • Github에서 : 예
  • 커뮤니티 및 기고자 : 4,000 명 이상의 회원, 13 명만 참여
  • 연혁 및 공헌 : 2010 년부터 비교적 오래되었지만 여전히 활발한 프로젝트

자원

— 아드리안 베
소스
4

jQuery를 사용하면 다음과 같이 제공됩니다 ...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

데모 : http://jsfiddle.net/molokoloco/NWjDb/

— 몰로 콜로 코
소스
브라우저가 이미지에 대해 304 Not Mofified 응답을 반환하면 이미지가 캐시되었음을 나타내는 경우 이것이 제대로 작동하지 않는다는 것을 알았습니다.
— JohnyFree
1

이미지로드 됨 PACKAGED v3.1.8 (최소화 된 경우 6.8Kb)을 사용하십시오. 비교적 오래되었지만 (2010 년 이후) 여전히 활발한 프로젝트입니다.

github에서 찾을 수 있습니다 : https://github.com/desandro/imagesloaded

그들의 공식 사이트 : http://imagesloaded.desandro.com/

왜 사용하는 것보다 낫습니까? 

$(window).load()

다음과 같이 이미지를 동적으로로드하려고 할 수 있습니다. jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});
— 예브게니 아파 나시 예프
소스
1
실제로,로드 된 이미지는 브라우저 간 src 속성 값 변경을 지원하지 않습니다. 매번 새 이미지 요소를 작성해야합니다. Firefox에서 시도하면 문제가 나타납니다.
— Adrien 수
좋은 점은 아직 구글 크롬과 IE-11에서만 테스트 한 것입니다. 작동하고있었습니다. 감사.
— Yevgeniy Afanasyev
나는 "당신이 imagesloaded 함께 할 수없는 무엇"Github의의에 imagesLoaded 관련 문제를 참조 점에서 내 질문 stackoverflow.com/q/26927575이 크로스 브라우저 문제를 추가했다 github.com/desandro/imagesloaded/issues/121을
— 아드 수
1

이 방법을 사용하면 본체 내부 또는 다른 컨테이너 (선택에 따라 다름)의 모든 이미지가로드 될 때 작업을 실행할 수 있습니다. PURE JQUERY, 플러그인 필요 없음

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});
— 마리오 메드 라노
소스
0

내 솔루션은 molokoloco 와 유사합니다 . jQuery 함수로 작성 :

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

예:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>
— 마리우스 차르 주크
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.