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

Program / 글쓴이

이것을 할 때 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를 사용 $(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.
});

답변

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

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

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

waitForImages jQuery 플러그인

사용법 예

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

jsFiddle의 예 .

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

답변

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

답변

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

답변

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

$('#image_id').load(
  function () {
    //code here
});

답변

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 년부터 비교적 오래되었지만 여전히 활발한 프로젝트

자원

답변

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/