使用jquery預加載圖像

Question

在我的網頁中，一些圖像需要花費大量的時間在IE中加載。因此，我用它來預加載圖像到我的頁面中，但問題仍然存在。有什麼建議嗎？

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

但是，最好的方法是使用一個回調函數，所以它插入預裝的圖像進入應用程序時，它已經完成加載。要實現這個，只需使用.load（）jQuery事件。

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

更新＃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

試試這個jQuery插件：http://farinspace.com/jquery-image-preload-plugin/

它允許您使用選擇搶img元素並將它預載他們。我不知道，如果你想預載的圖片已經在HTML，如果他們是因爲它可以讓你做你可能有興趣通過這個插件：

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

，同時還允許你手動預先載入圖像與文件名：

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

Answer 3

圖片精靈可以極大地加快速度（但要確保你使用類似ImageOptim壓縮它們）。接下來，將所有圖像託管在某個CDN上（我建議使用Amazon S3/CloudFront）。最後，使用類似於下面的內容預載所有圖像，並儘可能早地調用它。希望這有助於！

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