Prapemuat gambar dengan jQuery

Saya mencari cara yang cepat dan mudah untuk memuat foto dengan JavaScript. Saya menggunakan jQuery jika itu penting.

Saya melihat ini di sini ( 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" });
  }
};

Tapi, itu terlihat agak berlebihan untuk apa yang saya inginkan!

Saya tahu ada plugin jQuery di luar sana yang melakukan ini tetapi mereka semua tampak agak besar (dalam ukuran); Saya hanya perlu cara preloading gambar yang cepat, mudah dan singkat!

Cepat dan mudah:

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'
]);

Atau, jika Anda menginginkan plugin jQuery:

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

// Usage:

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

Inilah versi tweak dari respons pertama yang sebenarnya memuat gambar ke DOM dan menyembunyikannya secara default.

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

Gunakan objek Gambar JavaScript .

Fungsi ini memungkinkan Anda untuk memicu panggilan balik setelah memuat semua gambar. Namun, perhatikan bahwa itu tidak akan pernah memicu panggilan balik jika setidaknya satu sumber daya tidak dimuat. Ini dapat dengan mudah diperbaiki dengan menerapkan onerrorpanggilan balik dan menambah loadednilai atau menangani kesalahan.

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, Setelah memeriksa solusi Anda, saya masih mengalami masalah di Firefox di mana itu tidak akan memuat gambar sebelum pindah bersama dengan memuat halaman. Saya menemukan ini dengan meletakkan beberapa sleep(5)di skrip sisi server saya. Saya menerapkan solusi berikut berdasarkan Anda yang tampaknya menyelesaikan ini.

Pada dasarnya saya menambahkan panggilan balik ke plugin prapuat jQuery Anda, sehingga dipanggil setelah semua gambar dimuat dengan benar.

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

Tidak menarik, dalam konteks saya, saya menggunakan ini sebagai berikut:

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

Semoga ini membantu seseorang yang datang ke halaman ini dari Google (seperti yang saya lakukan) mencari solusi untuk preloading gambar pada panggilan Ajax.

Kode jQuery satu baris ini membuat (dan memuat) elemen DOM img tanpa memperlihatkannya:

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

Penggunaannya cukup sederhana:

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

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

Saya memiliki plugin kecil yang menangani ini.

Ini disebut waitForImages dan dapat menangani imgelemen atau elemen apa pun dengan referensi ke gambar di CSS, misalnya div { background: url(img.png) }.

Jika Anda hanya ingin memuat semua gambar, termasuk yang direferensikan dalam CSS, berikut adalah cara melakukannya :)

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

Anda dapat memuat gambar di html Anda di suatu tempat menggunakan css display:none; aturan , kemudian tunjukkan ketika Anda inginkan dengan js atau jquery

jangan gunakan fungsi js atau jquery untuk preload hanyalah aturan css Vs banyak baris js yang akan dieksekusi

contoh: 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();

Mem-preloading gambar dengan jquery / javascript tidak bagus karena gambar membutuhkan beberapa milidetik untuk memuat di halaman + Anda memiliki milidetik untuk skrip diurai dan dieksekusi, terutama jika itu adalah gambar besar, jadi menyembunyikannya dalam hml lebih baik juga untuk kinerja, menyebabkan gambar benar-benar dimuat tanpa terlihat sama sekali, sampai Anda menunjukkan itu!

Plugin jquery imageLoader ini hanya 1,39kb

pemakaian:

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

ada juga opsi lain seperti apakah Anda ingin memuat gambar secara sinkron atau asikron dan acara lengkap untuk masing-masing gambar.

Cara cepat dan bebas plugin untuk memuat gambar di jQuery dan mendapatkan fungsi panggilan balik adalah membuat banyak imgtag sekaligus dan menghitung respons, mis.

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

Perhatikan bahwa jika Anda ingin mendukung IE7, Anda harus menggunakan versi yang sedikit kurang cantik ini (yang juga berfungsi di browser lain):

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

Terima kasih untuk ini! Saya ingin menambahkan sedikit riff pada jawaban JP - Saya tidak tahu apakah ini akan membantu siapa pun, tetapi dengan cara ini Anda tidak harus membuat array gambar, dan Anda dapat memuat semua gambar besar Anda jika Anda beri nama jempol Anda dengan benar. Ini berguna karena saya memiliki seseorang yang menulis semua halaman dalam html, dan itu memastikan satu langkah lebih sedikit untuk mereka lakukan - menghilangkan kebutuhan untuk membuat array gambar, dan langkah lain di mana hal-hal bisa kacau.

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

Pada dasarnya, untuk setiap gambar pada halaman itu meraih src dari setiap gambar, jika itu cocok dengan kriteria tertentu (adalah ibu jari, atau gambar halaman rumah) itu mengubah nama (string dasar diganti dalam gambar src), kemudian memuat gambar .

Dalam kasus saya, halaman itu penuh dengan gambar jempol semua bernama sesuatu seperti image_th.jpg, dan semua gambar besar yang sesuai bernama image_lg.jpg. Jempol ke besar hanya menggantikan _th.jpg dengan _lg.jpg dan kemudian memuat semua gambar besar.

Semoga ini bisa membantu seseorang.

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

Saya menggunakan kode berikut:

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

Saya akan menggunakan file Manifest untuk memberi tahu browser (modern) untuk memuat semua gambar yang relevan dan menyimpannya. Gunakan Grunt dan grunt-manifes untuk melakukan ini secara otomatis dan jangan pernah khawatir lagi tentang preload script, cache invalidators, CDN dll.

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

Ini bekerja untuk saya bahkan di IE9:

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

Saya ingin melakukan ini dengan hamparan khusus Google Maps API. Kode sampel mereka hanya menggunakan JS untuk memasukkan elemen IMG dan kotak placeholder gambar ditampilkan hingga gambar dimuat. Saya menemukan jawaban di sini yang berfungsi untuk saya: https://stackoverflow.com/a/10863680/2095698 .

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

Ini preload gambar seperti yang disarankan sebelumnya, dan kemudian menggunakan penangan untuk menambahkan objek img setelah URL img dimuat. Dokumentasi jQuery memperingatkan bahwa gambar yang di-cache tidak bekerja dengan baik dengan kode acara / penangan ini, tapi itu berfungsi untuk saya di FireFox dan Chrome, dan saya tidak perlu khawatir tentang IE.

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

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

hanya untuk menunjukkannya :)

5 baris dalam naskah kopi

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

Bagi mereka yang tahu sedikit actioncript, Anda dapat memeriksa flash player, dengan sedikit usaha, dan membuat preloader flash, yang juga dapat Anda ekspor ke html5 / Javascript / Jquery. Untuk menggunakan jika flash player tidak terdeteksi, lihat contoh bagaimana melakukan ini dengan peran youtube kembali ke html5 player :) Dan buat sendiri. Saya tidak memiliki detail, karena saya belum memulai, jika saya tidak lupa, saya akan mempostingnya nanti dan akan mencoba beberapa kode Jquery standerd untuk saya.