Wstępne ładowanie obrazów za pomocą jQuery

Szukam szybkiego i łatwego sposobu na wstępne załadowanie obrazów za pomocą JavaScript. Używam jQuery, jeśli to ważne.

Widziałem to tutaj ( 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" });
  }
};

Ale wygląda trochę przesadnie jak na to, czego chcę!

Wiem, że istnieją wtyczki jQuery, które to robią, ale wszystkie wydają się nieco duże (pod względem wielkości); Potrzebuję tylko szybkiego, łatwego i krótkiego sposobu wstępnego ładowania zdjęć!

Szybko i łatwo:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Lub, jeśli chcesz mieć wtyczkę jQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Oto poprawiona wersja pierwszej odpowiedzi, która faktycznie ładuje obrazy do DOM i domyślnie je ukrywa.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Użyj obiektu JavaScript Image .

Ta funkcja umożliwia wywołanie zwrotne po załadowaniu wszystkich zdjęć. Należy jednak pamiętać, że nigdy nie wyzwoli oddzwonienia, jeśli przynajmniej jeden zasób nie zostanie załadowany. Można to łatwo naprawić, implementując onerrorwywołanie zwrotne i zwiększając loadedwartość lub obsługując błąd.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

JP, po sprawdzeniu twojego rozwiązania nadal miałem problemy z Firefoksem, w którym nie ładowałoby zdjęć przed przejściem wraz z ładowaniem strony. Odkryłem to, umieszczając trochę sleep(5)w skrypcie po stronie serwera. Wdrożyłem następujące rozwiązanie oparte na twoim, które wydaje się rozwiązać ten problem.

Zasadniczo dodałem wywołanie zwrotne do wtyczki wstępnego ładowania jQuery, aby była wywoływana po prawidłowym załadowaniu wszystkich obrazów.

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Z mojego zainteresowania korzystam w następujący sposób:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Mam nadzieję, że pomoże to komuś, kto wejdzie na tę stronę z Google (tak jak ja), szukając rozwiązania w zakresie wstępnego ładowania zdjęć w połączeniach Ajax.

Ten jednowierszowy kod jQuery tworzy (i ładuje) element DOM img, nie pokazując go:

$('<img src="img/1.jpg"/>');

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

Użycie jest dość proste:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

Mam małą wtyczkę, która to obsługuje.

Nazywa się waitForImages i może obsługiwać imgelementy lub dowolny element z odniesieniem do obrazu w CSS, np div { background: url(img.png) }.

Jeśli chcesz po prostu załadować wszystkie obrazy, w tym te, do których odwołuje się CSS, oto jak to zrobić :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

możesz załadować obrazy do swojego html gdzieś za pomocą display:none;reguły css , a następnie pokazać je w dowolnym momencie za pomocą js lub jquery

nie używaj funkcji js lub jquery do wstępnego ładowania to tylko reguła css W porównaniu z wieloma wierszami js do wykonania

przykład: HTML

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Wstępne ładowanie obrazów za pomocą jquery / javascript nie jest dobre, ponieważ obrazy ładują się na stronie w kilka milisekund + masz milisekundy na przeanalizowanie i wykonanie skryptu, zwłaszcza jeśli są to duże obrazy, więc ukrywanie ich w hml jest lepsze również ze względu na wydajność, ponieważ obraz jest naprawdę wstępnie załadowany bez widoczności, dopóki tego nie pokażesz!

Ten jQuery imageLoader plugin jest tylko 1.39kb

stosowanie:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

istnieją również inne opcje, takie jak to, czy chcesz ładować obrazy synchronicznie, czy asychronicznie oraz kompletne zdarzenie dla każdego pojedynczego obrazu.

Szybkim, pozbawionym wtyczek sposobem na wstępne ładowanie obrazów w jQuery i uzyskanie funkcji wywołania zwrotnego jest utworzenie wielu imgznaczników jednocześnie i policzenie odpowiedzi, np.

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Pamiętaj, że jeśli chcesz obsługiwać IE7, musisz użyć tej nieco mniej ładnej wersji (która działa również w innych przeglądarkach):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Dzięki za to! Chciałbym dodać trochę riffu do odpowiedzi JP - nie wiem, czy to komukolwiek pomoże, ale w ten sposób nie musisz tworzyć szeregu obrazów i możesz załadować wszystkie duże obrazy, jeśli nazwij swoje kciuki poprawnie. Jest to przydatne, ponieważ mam kogoś, kto pisze wszystkie strony w HTML, i zapewnia im o jeden krok mniej do zrobienia - eliminując potrzebę tworzenia tablicy obrazów i kolejny krok, w którym wszystko może się popsuć.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Zasadniczo dla każdego obrazu na stronie pobiera plik src każdego obrazu, jeśli spełnia określone kryteria (jest to kciuk lub obraz strony głównej), zmienia nazwę (ciąg podstawowy zamienia w obrazie src), a następnie ładuje obrazy .

W moim przypadku strona była pełna obrazów kciuka, wszystkie o nazwach podobnych do image_th.jpg, a wszystkie odpowiadające im duże obrazy są nazwane image_lg.jpg. Kciuk do dużego po prostu zamienia _th.jpg na _lg.jpg, a następnie wstępnie ładuje wszystkie duże obrazy.

Mam nadzieję, że to komuś pomoże.

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Używam następującego kodu:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Korzystam z pliku manifestu, aby powiedzieć (nowoczesnym) przeglądarkom internetowym, aby ładowały również wszystkie odpowiednie obrazy i buforowały je. Użyj Grunt i mruk-manifest, aby zrobić to automatycznie i nigdy więcej nie martw się o skrypty ładowania wstępnego, unieważniające pamięć podręczną, CDN itp.

https://github.com/gunta/grunt-manifest

Działa to dla mnie nawet w IE9:

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

Chciałem to zrobić z niestandardową nakładką interfejsu API Map Google. Ich przykładowy kod po prostu używa JS do wstawiania elementów IMG, a pole symbolu zastępczego obrazu jest wyświetlane do momentu załadowania obrazu. Znalazłem tutaj odpowiedź, która zadziałała dla mnie: https://stackoverflow.com/a/10863680/2095698 .

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

Spowoduje to wstępne załadowanie obrazu, jak sugerowano wcześniej, a następnie użycie modułu obsługi do dołączenia obiektu img po załadowaniu adresu URL img. Dokumentacja jQuery ostrzega, że ​​buforowane obrazy nie działają dobrze z tym kodem zdarzenia / obsługi, ale działa dla mnie w FireFox i Chrome i nie muszę się martwić o IE.

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) nie .attr('src',this)

żeby to podkreślić :)

5 linii w 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

Dla tych, którzy znają trochę skryptów akcji, możesz przy minimalnym wysiłku sprawdzić Flash Playera i zrobić Flash Preloader, który możesz również wyeksportować do HTML5 / Javascript / Jquery. Aby użyć, jeśli Flash Player nie zostanie wykryty, sprawdź przykłady, jak to zrobić z rolą YouTube z powrotem do html5 player :) I stwórz własną. Nie mam szczegółów, ponieważ jeszcze nie zacząłem, jeśli nie zapomnę, opublikuję to później i wypróbuję jakiś własny kod Jquery do mojego.