預加載下一個圖像的jQuery

我創建使用嵌套裏的幻燈片：預加載下一個圖像的jQuery

<ul id="ss_images_set"> 
       <li> 
        <img link="images/koala_1.jpg" /> 
        <p class="img_caption">&#169;Copyright</p> 
        <p class="img_author">John Merriam</p> 
        <p class="img_href">http://www.twitter.com</p> 
        <p class="img_hashtag">JohnMerriam</p> 
       </li>

我每天都會上傳新的圖片到這個幻燈片，所以會有中集（數百個）許多圖像。有那麼多的預裝載器，我很困惑只用來加載下一張圖片。幻燈片有一個圖像預加載器，但我認爲它不能正常工作，因爲下一張圖像顯然沒有被緩存（當下一張圖像時，下面的內容會上下跳轉）。

這裏是預加載程序腳本：

function preload_images(){ 
var pre_image = curr_img - 1; 
if(pre_image < 0) pre_image = (tot_elements-1); 

var curr_obj = 0; 

if(!$('#img_preloaded_'+pre_image).length > 0){ 
    curr_obj = slideshow[pre_image]; 
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />'); 
} 

var pre_image = curr_img + 1; 
if(tot_elements==pre_image) pre_image = 0; 
if(!$('#img_preloaded_'+pre_image).length > 0){ 
    curr_obj = slideshow[pre_image]; 
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />'); 
}

我不知道爲什麼它不緩存。它寫錯了嗎？它在下面的小提琴中是否在錯誤的位置？

撥弄JS：http://jsfiddle.net/doobada/9m9eq/

當前恩。的幻燈片（內容在下面跳轉）：https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

好的，jQuery不是我的強大套件（現在拿着tuts +課程），但是這不應該讓我花三個星期弄清楚。

感謝您的幫助。

來源

2012-11-01 doobada

在js（在瀏覽器上工作）中預加載圖片是背後的痛處。一些傾向於「優化」不可見圖像的加載。 – SoonDead

@SoonDead你的意思是「'優化'不可見圖像的加載」？ – doobada

例如在Chrome中，當您將不可見的圖像附加到dom時，它不會僅僅加載它。但是我不確定它是多麼的真實，一年前我一直在嘲笑這件事，所以自那以後可能會發生很多變化。 – SoonDead

var newImageUrl = 'someimage.png'; 

/* preload an image using jQuery: */ 
$('<img>').attr({ 
    src: newImageUrl 
}).load(function() { 
    /* image is loaded and could be used */ 
});

來源

2012-11-01 13:45:46 feeela

但它不是跨瀏覽器解決方案：/ – GomatoX

感謝您的答案，feeela。我正在尋找跨瀏覽器支持，我需要加載ul中的下一個圖像 - 我不知道下一個圖像的URL。 – doobada

@GomatoX我不知道任何瀏覽器的代碼不起作用。你能告訴我，在哪些瀏覽器中存在該代碼的問題？ – feeela

預加載下一個圖像的jQuery

回答

相關問題