JQuery kullanarak görüntüleri önyükleme

Question

Web sayfamda IE.O’nun bazı görüntüleri yüklenmek için çok zaman harcıyorum. Bunu, sayfamdaki görüntüleri önyüklemek için kullandım.Ama yine de sorun devam ediyor.Bir öneri?

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

<

div>

Answer 1

// Create an image element 
var image1 = $('<img />').attr('src', 'imageURL.jpg'); 

// Insert preloaded image into the DOM tree 
$('.profile').append(image1); 
// OR 
image1.appendTo('.profile'); 

Ama tamamlandığında en iyi yolu uygulamasına önceden yüklenmiş bir görüntü ekler, böylece bir geri çağırma işlevi kullanmaktır Yükleniyor. Bunu başarmak için sadece .load() jQuery olayı kullanın.

// Insert preloaded image after it finishes loading 
$('<img />') 
    .attr('src', 'imageURL.jpg') 
    .load(function(){ 
     $('.profile').append($(this)); 
     // Your other custom code 
    }); 

Güncelleme # 1

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(index){ 
     $('<img />') 
     .attr('src', arrayOfImages[index]) 
     .load(function(){ 
      $('div').append($(this)); 
      // Your other custom code 
     }); 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

Answer 2

bu jQuery eklentisi deneyin: http://farinspace.com/jquery-image-preload-plugin/

Bu bir seçici kullanılarak img elemanları kapmak ve onları önceden yüklemek sahip olmasını sağlar.

$('#content img').imgpreload(function() 
{ 
    // this = jQuery image object selection 
    // callback executes when all images are loaded 
}); 

hala elle görüntüleri önceden yüklemek için izin verirken: Sana önceden yüklemek istediğiniz görüntüleri oldukları takdirde yapmaya izin verir gibi bu eklenti tarafından ilgi gösterebilir, HTML zaten emin değilim dosya adlarıyla:

$.imgpreload('/images/a.gif',function() 
{ 
    // this = new image object 
    // callback 
}); 

Answer 3

Görüntüler sprite muazzam hızlandırmak (ama ImageOptim gibi bir şey kullanarak bunları sıkıştırmak emin olun). Ardından, tüm resimlerinizi bir CDN'de bir yerde barındırın (Amazon S3/CloudFront'u öneriyorum). Son olarak, tüm resimlerinizi aşağıdaki gibi bir şey kullanarak önyükleyin ve bunu mümkün olduğu kadar erken çağırın. Umarım bu yardımcı olur!

function loadImages(){ 
    var images = [ 
     'http://cdn.yourdomain.com/img/image1.png', 
     'http://cdn.yourdomain.com/img/image2.jpg', 
     'http://cdn.yourdomain.com/img/image3.jpg', 
     'http://cdn.yourdomain.com/img/image4.jpg' 
    ]; 
    $(images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 
}