预加载下一个图像的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

回答

相关问题