Question

我有一个缩略图页面，它使用jquery中内置的图像交换脚本悬停来改变它们的不透明度。但是，当我在实时网站上运行它时，它很慢，你必须等待第二个图像加载，所以悬停交换不会立即发生。如何在页面加载时预加载所有拇指图像？该网站是实时的here

这是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");

        });

Answer 1

以alex'回答为基础

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

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

Answer 2

Here is an article to help you

它正在DOM中创建img个元素。

我经常通过创建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';

Answer 3

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

由于您要为翻转图像预加载图像很重要，因此在加载这些图像之前，您可能不希望显示菜单。您可以在init上隐藏菜单并在onload回调中显示它。

如何为图像构建一个javascript预加载器

3 个答案: