Vorladen von Bildern mit jQuery

Question

Ich bin auf der Suche nach einem schnellen und einfachen Weg, um Bilder mit JavaScript vorzuladen. Ich bin mit jQuery, wenn das wichtig ist.

Ich habe dies hier gesehen ( http://nettuts.com... ) :

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

Aber es sieht ein bisschen übertrieben aus für das, was ich will!

Ich weiß, es gibt jQuery-Plugins, die dies tun, aber sie alle scheinen ein bisschen groß (in der Größe); Ich brauche nur eine schnelle, einfache und kurze Art und Weise der Preload-Bilder!

Answer 1

Das funktioniert bei mir sogar im IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Answer 2

Ich wollte dies mit einem benutzerdefinierten Google Maps API-Overlay tun. Ihr Beispielcode verwendet einfach JS, um IMG-Elemente einzufügen, und das Bildplatzhalterfeld wird angezeigt, bis das Bild geladen ist. Ich fand eine Antwort hier, die für mich gearbeitet: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

Dies lädt ein Bild vor, wie zuvor vorgeschlagen, und verwendet dann den Handler, um das img-Objekt anzuhängen, nachdem die img-URL geladen ist. jQuery-Dokumentation warnt, dass zwischengespeicherte Bilder nicht gut mit diesem Eventing/Handler-Code funktionieren, aber es funktioniert für mich in FireFox und Chrome, und ich habe nicht über IE zu kümmern.

Answer 3

Ich verwende diesen Codeschnipsel normalerweise in meinen Projekten für das Laden der Bilder auf einer Seite. Sie können das Ergebnis hier sehen https://jsfiddle.net/ftor34ey/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />

<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
    .bg {
        background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
    }
</style>
<div class="bg"></div>

<div id="loadingProgress"></div>

Das Skript speichert in einem Array alle src y background-image der Seite und laden sie alle.

Sie können den Fortschritt des Ladevorgangs mit der var sehen/lesen/anzeigen loadCount .

let backgroundImageArray = [];

function backgroundLoading(i) {

    let loadCount = 0;

    let img = new Image();
    $(img).on('load', function () {

        if (i < backgroundImageArray.length) {

            loadCount = parseInt(((100 / backgroundImageArray.length) * i));
            backgroundLoading(i + 1);

        } else {

            loadCount = 100;
            // do something when the page finished to load all the images
            console.log('loading completed!!!');
            $('#loadingProgress').append('<div>loading completed!!!</div>');

        }

        console.log(loadCount + '%');
        $('#loadingProgress').append('<div>' + loadCount + '%</div>');

    }).attr('src', backgroundImageArray[i - 1]);

}

$(document).ready(function () {

    $('*').each(function () {

        var backgroundImage = $(this).css('background-image');
        var putInArray = false;

        var check = backgroundImage.substr(0, 3);

        if (check == 'url') {

            backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
            backgroundImage = backgroundImage.replace('"', '');
            backgroundImage = backgroundImage.replace('"', '');

            if (backgroundImage.substr(0, 4) == 'http') {
                backgroundImage = backgroundImage;
            }
            putInArray = true;

        } else if ($(this).get(0).tagName == 'IMG') {

            backgroundImage = $(this).attr('src');
            putInArray = true;

        }

        if (putInArray) {
            backgroundImageArray[backgroundImageArray.length] = backgroundImage;
        }

    });

    backgroundLoading(1);

});

Answer 4

5 Zeilen in coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Answer 5

Wer sich ein wenig mit Actionscript auskennt, kann mit minimalem Aufwand einen Flash-Player suchen und einen Flash-Preloader erstellen, den man auch nach html5/Javascript/Jquery exportieren kann. Für den Fall, dass der Flash-Player nicht erkannt wird, finden Sie Beispiele dafür, wie Sie dies mit dem youtube role back to html5 player tun können:) Und erstellen Sie Ihre eigenen. Ich habe nicht die Details, weil ich noch nicht begonnen habe, wenn ich nicht vergessen, ich werde es später posten und werde versuchen, einige standerd Jquery Code zu mir.