如何为图像构建JavaScript预加载器 [英] How to build a javascript preloader for images

问题描述

我有一个缩略图页面，通过使用内置在jquery中的图像交换脚本将鼠标悬停来更改其不透明度.但是，当我在实时网站上运行它时，速度很慢，您必须等待第二个图像加载，这样悬停交换不会立即发生.页面加载时，我将如何预加载所有缩略图图像?该网站处于实时状态此处

I have a page of thumbnails which change their opacity with a hover with a image swap script built in jquery. However When I run it on a live website it is slow and you have to wait for the second image to load so the hover swap doesn't happen right away. How would I preload all of the thumb images while the page loads? the site is live 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");

        });

推荐答案

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

It is creating img elements in the DOM.

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

I have often done it by making a new Image() and then setting its src property to the image location. You get an event triggered when it loads, which is 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';

这篇关于如何为图像构建JavaScript预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！