Question

我正在使用Jquery循环插件。

我的基本淡化效果很好。但是，我想知道如何使用javascript加载图像，而不是同时在页面上显示所有图像，同时保持漂亮的淡入淡出过渡。

如果用户没有开启javascript，他们只会看到一张图片而不是一堆图片。

提前致谢！

Answer 1

作者本人都解释了here。

所需js的简短摘要：

<script type="text/javascript"> 

    var stack = []; 

    // preload images into an array; we will preload beach3.jpg - beach8.jpg 
    for (var i = 3; i < 9; i++) { 
        var img = new Image(200,200); 
        img.src = 'images/beach' + i + '.jpg'; 
        $(img).bind('load', function() { 
            stack.push(this); 
        }); 
    }  

    // start slideshow 
    $('#slideshow').cycle({ 
        timeout:  2000, 
        before:   onBefore 
    }); 

    // add images to slideshow 
    function onBefore(curr, next, opts) { 
        if (opts.addSlide) // <-- important! 
            while(stack.length) 
                opts.addSlide(stack.pop());  
    }; 

</script>

Answer 2

我这样做的方法是让第一个图像设置为“style ='display：none;”。循环插件将在运行时更改此选项并选择该图像。如果未启用javascript，则用户将永远不会看到其他图像。这很简单，尽管无论javascript是否启用，页面加载的时间都一样长。如果您希望减少页面的加载时间 - 比如当您有大量图像时，@ redsquare的答案可能会更好。

Jquery循环帮助

2 个答案: