JQuery ile görüntüleri önceden yükleme

JavaScript ile görüntüleri önceden yüklemenin hızlı ve kolay bir yolunu arıyorum. Bu önemli ise jQuery kullanıyorum.

Bunu burada gördüm ( 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" });
  }
};

Ama, istediğim şey için biraz fazla görünüyor!

Bunu yapmak orada jQuery eklentileri olduğunu biliyorum ama hepsi biraz (büyüklük) büyük görünüyor; Görüntüleri önceden yüklemenin hızlı, kolay ve kısa bir yoluna ihtiyacım var!

Hızlı ve kolay:

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

Veya, bir jQuery eklentisi istiyorsanız:

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

// Usage:

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

İşte görüntüleri gerçekte DOM'a yükleyen ve varsayılan olarak gizleyen ilk yanıtın ince bir sürümü.

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

JavaScript Image nesnesini kullanın .

Bu işlev, tüm resimleri yükledikten sonra geri aramayı tetiklemenizi sağlar. Ancak, en az bir kaynak yüklenmezse hiçbir zaman geri arama tetiklemeyeceğini unutmayın. Bu, onerrorgeri arama ve loadeddeğeri arttırarak veya hatayı kaldırarak kolayca düzeltilebilir .

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, Çözümünüzü kontrol ettikten sonra, Firefox'ta sayfayı yüklemeye devam etmeden önce görüntüleri önceden yüklemeyeceği sorunlar yaşıyordum. Bunu bazı sleep(5)sunucu tarafı komut dosyama koyarak keşfettim . Bunu çözmüş gibi görünen aşağıdaki çözümü sizinkine uyguladım.

Temelde jQuery önyükleme eklentisine bir geri arama ekledim, böylece tüm görüntüler düzgün bir şekilde yüklendikten sonra çağrılır.

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

İlgi alanı dışında, benim bağlamımda, bunu aşağıdaki gibi kullanıyorum:

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

Umarım bu, Google'dan bu sayfaya gelen birisinin (benim yaptığım gibi) Ajax çağrılarına görüntüleri önceden yüklemek için bir çözüm aramasına yardımcı olur.

Bu bir satır jQuery kodu göstermeden bir DOM öğesi img oluşturur (ve yükler):

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

Kullanımı oldukça basit:

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

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

Bunu işleyen küçük bir eklentim var.

Buna waitForImages denir ve imgöğeleri veya CSS'deki bir görüntüye referans olan herhangi bir öğeyi işleyebilir , örn div { background: url(img.png) }.

CSS'de atıfta bulunulanlar da dahil olmak üzere tüm resimleri yüklemek istiyorsanız , işte böyle yapardınız :)

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

html'nize css display:none;kuralını kullanarak bir yere resim yükleyebilir , ardından js veya jquery ile istediğiniz zaman gösterebilirsiniz

js veya jquery işlevlerini önceden yüklemek için kullanmayın sadece bir css kuralı Vs yürütülecek birçok js satırı

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

Jquery / javascript ile görüntüleri önceden yüklemek iyi değildir, çünkü görüntüler sayfaya yüklenmek için birkaç milisaniye gerekir + betiğin ayrıştırılması ve yürütülmesi için milisaniye süreniz vardır, özellikle de büyük resimlerdeyse, hml'de gizlemek de performans için daha iyidir, çünkü bunu gösterene kadar görüntü hiç görünmeden gerçekten önceden yüklenir!

Bu jquery imageLoader eklentisi sadece 1.39kb

kullanımı:

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

görüntüleri senkronize veya asenkronize olarak yüklemek isteyip istemediğiniz ve her bir görüntü için eksiksiz bir olay gibi başka seçenekler de vardır.

JQuery'de görüntüleri önceden yüklemek ve geri arama işlevi almak için hızlı, eklentisiz bir yol, imgaynı anda birden fazla etiket oluşturmak ve yanıtları saymaktır, ör.

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

IE7'yi desteklemek istiyorsanız, bu biraz daha az güzel sürümü kullanmanız gerektiğini unutmayın (Bu aynı zamanda diğer tarayıcılarda da çalışır):

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

Bunun için teşekkürler! JP'nin cevabına biraz riff eklemek isterdim - bunun kimseye yardım edip etmeyeceğini bilmiyorum, ancak bu şekilde bir dizi görüntü oluşturmak zorunda değilsiniz ve eğer tüm büyük resimlerinizi önceden yükleyebilirsiniz. başparmaklarınızı doğru adlandırın. Bu kullanışlı çünkü tüm sayfaları html ile yazan biri var ve onlar için daha az bir adım sağlar - görüntü dizisi oluşturma ihtiyacını ortadan kaldırır ve şeylerin berbat olabileceği başka bir adım.

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

Temel olarak, sayfadaki her görüntü için her görüntünün src'sini alır, belirli ölçütlerle eşleşiyorsa (bir başparmak veya ana sayfa görüntüsü ise) adı değiştirir (görüntü src'sinde temel bir dize değiştirilir), ardından görüntüleri yükler .

Benim durumumda, sayfa, image_th.jpg gibi bir ad taşıyan küçük resimlerle doluydu ve karşılık gelen tüm büyük görüntüler image_lg.jpg olarak adlandırıldı. Büyük olan başparmak _th.jpg dosyasını _lg.jpg ile değiştirir ve ardından tüm büyük resimleri önceden yükler.

Umarım bu birine yardımcı olur.

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

Aşağıdaki kodu kullanıyorum:

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

Web tarayıcılarına ilgili tüm resimleri yükleyip önbelleklemelerini söylemek için bir Manifest dosyası kullanırdım. Bunu otomatik olarak yapmak için Grunt ve grunt-manifest kullanın ve önyükleme komut dosyaları, önbellek geçersizleştiricileri, CDN vb.

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

IE9'da bile bu benim için çalışıyor:

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

Bunu bir Google Haritalar API'sı özel yer paylaşımı ile yapmak istedim. Örnek kodları IMG öğelerini eklemek için sadece JS kullanır ve görüntü yüklenene kadar görüntü yer tutucu kutusu görüntülenir. Burada benim için çalışan bir cevap buldum: https://stackoverflow.com/a/10863680/2095698 .

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

Bu, daha önce önerildiği gibi bir görüntüyü önceden yükler ve img URL'si yüklendikten sonra img nesnesini eklemek için işleyiciyi kullanır. jQuery'nin belgeleri, önbelleğe alınan görüntülerin bu olay / işleyici koduyla iyi çalışmadığı konusunda uyarıyor, ancak FireFox ve Chrome'da benim için çalışıyor ve IE için endişelenmem gerekmiyor.

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

.attr('src',value) değil .attr('src',this)

sadece işaret etmek :)

Kahvede 5 satır

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

Biraz actionscript bilenler için, en az çabayla flash player'ı kontrol edebilir ve html5 / Javascript / Jquery'ye de aktarabileceğiniz bir flash ön yükleyici yapabilirsiniz. Flash oynatıcı algılanmazsa kullanmak için, bunun html5 oynatıcısına geri dönerek youtube rolü ile nasıl yapılacağına dair örnekleri kontrol edin :) Ve kendinizinkini oluşturun. Ben henüz başlamadıysanız, ayrıntılara sahip değilim, eğer unutmazsam, daha sonra yayınlayacağım ve benim için bazı standerd Jquery kodunu deneyeceğim.