Oficjalny sposób zapytania jQuery czekać na załadowanie wszystkich obrazów przed wykonaniem czegoś

Napisałem wtyczkę, która może odpalić wywołania zwrotne po załadowaniu obrazów w elementach lub odpalić raz na załadowany obraz.

Jest podobny do $(window).load(function() { .. }), z tym, że pozwala zdefiniować dowolny selektor do sprawdzenia. Jeśli chcesz tylko wiedzieć, kiedy wszystkie obrazy w #content (na przykład) zostały załadowane, jest to wtyczka dla Ciebie.

Obsługuje również ładowanie obrazów odwołujących się do CSS, takich jak background-image, list-style-image, itd.

WaitForImages jQuery plugin

• GitHub repozytorium .
• Readme .
• źródło produkcji .
• źródło rozwoju .

Przykładowe Użycie

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

Przykład na jsFiddle .

Więcej dokumentacji jest dostępnych na stronie GitHub.

$(window).load() będzie działać tylko przy pierwszym załadowaniu strony. Jeśli robisz dynamiczne rzeczy (przykład: kliknij przycisk, poczekaj na załadowanie nowych obrazów), to nie zadziała. Aby to osiągnąć, możesz użyć mojej wtyczki:

Demo

Pobierz

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

Dla tych, którzy chcą być powiadamiani o zakończeniu pobierania pojedynczego obrazu, który zostanie wywołany po wywołaniu $(window).load, możesz użyć zdarzenia load elementu obrazu.

Np.:

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

Żadna z odpowiedzi do tej pory nie dała tego, co wydaje się być najprostszym rozwiązaniem.

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

Polecam użycie imagesLoaded.js biblioteki javascript.

Dlaczego nie użyć jQuery $(window).load()?

Jako ansered on https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

To kwestia zakresu. imagesLoaded pozwala kierować zestaw obrazów, podczas gdy $(window).load() celuje w wszystkie aktywa - w tym wszystkie obrazy, obiekty, .js i .pliki css, a nawet iframes. Najprawdopodobniej obrazy będą Uruchom wcześniej niż $(window).load(), ponieważ celuje w mniejszy zestaw aktywów.

Inne dobre powody, aby używać imagesloaded

• oficjalnie wspierany przez IE8 +
• licencja: Licencja MIT
• zależności: brak
• waga (minified & gzipped) : 7KB minified (light!)
• Pobierz builder ( pomaga zmniejszyć wagę): nie ma potrzeby, już małe
• na Githubie: Tak
• społeczność i współpracownicy: całkiem duża, ponad 4000 członków, chociaż tylko 13 uczestników
• historia i wkład : stabilny jako stosunkowo stary (od 2010 roku), ale nadal aktywny projekt

Zasoby

• projekt na GitHubie: https://github.com/desandro/imagesloaded
• Oficjalna strona: http://imagesloaded.desandro.com /
• sprawdź czy obraz jest wczytany (bez błędów) w JavaScript
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded javascript library: jaka jest obsługa przeglądarki i urządzenia?

Z jQuery przychodzę z tym...

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

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

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

Demo: http://jsfiddle.net/molokoloco/NWjDb/

Użyj imagesLoaded PACKAGED v3. 1. 8 (6,8 Kb po zminimalizowaniu). Jest to stosunkowo stary (od 2010 roku), ale wciąż aktywny projekt.

Możesz go znaleźć na GitHubie: https://github.com/desandro/imagesloaded

Ich oficjalna strona: http://imagesloaded.desandro.com/

Dlaczego jest lepiej niż używać:

$(window).load() 

Ponieważ możesz chcieć ładować obrazy dynamicznie, jak to: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

W ten sposób możesz wykonać akcję, gdy załadowane zostaną wszystkie obrazy wewnątrz ciała lub innego kontenera (który zależy od Twojego wyboru). Czysty JQUERY, bez plugginsów.

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

Moje rozwiązanie jest podobne do molokoloco . Zapisany jako funkcja 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);
};

Przykład:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>