Question

我正在使用嵌套的li创建幻灯片：

<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 +课程），但这不应该花费我3个星期的时间来解决。

感谢您的帮助。

Answer 1

var newImageUrl = 'someimage.png';

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

预加载下一个图像jQuery

1 个答案: