2

我有一页缩略图，通过悬停在 jquery 中构建的图像交换脚本来改变它们的不透明度。但是，当我在实时网站上运行它时，速度很慢，您必须等待第二张图像加载，因此不会立即发生悬停交换。在页面加载时如何预加载所有拇指图像？该网站在这里

这是html

<div class="span-16 last" id="thumbs">
        <div class="span-4">
            <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a>
        </div>

    </div><!--THUMBS ENDS-->

这是jquery

$("#thumb1").hover(
        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1A.gif");
            },

        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1.gif");

        });
4

3 回答 3

1

以亚历克斯的回答为基础

var images = ['a.jpg','b.jpg','c.jpg'];
var preload = [];
for(i in images)
{
    preload[i] = new Image();
    preload[i].src = images[i];
}

这会预加载images数组中的所有图像。该脚本假定您事先知道要预加载哪些图像。

于 2010-07-29T13:15:09.267 回答
0

这里有一篇文章可以帮助你。

它img在 DOM 中创建元素。

我经常通过制作一个new Image()然后将其src属性设置为图像位置来完成它。加载时会触发一个事件，即onload.

所以一个简短的例子是

var preload = new Image();

preload.onload = function() { // I believe you need to define this before you set the src for IE
    alert('loaded');
}

preload.src = 'path/to/image.png';
于 2010-07-28T23:48:30.493 回答
0

请参阅我对我投票赞成的解决方案的评论。有关添加带有回调的真正预加载器的更多信息，请参见此处： http: //farinspace.com/jquery-image-preload-plugin/

由于预加载图像以进行翻转很重要，因此在加载这些图像之前，您可能不想显示菜单。您可以在初始化时隐藏菜单并在 onload 回调中显示它。

于 2010-07-31T15:16:40.867 回答