如何预加载大尺寸图像？ [英] how to preload large size image?

问题描述

我有一些链接，鼠标悬停在这些链接上我正在更改< div> 背景图片

i have certain links, on mouse over of those links I am changing <div> background image

我使用的jQuery是 -

jQuery I have used is-

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        $(this).find('hbg').attr('title', 'my tootip info');
        });     
    }

它工作正常，但问题是当我在服务器上运行图像时需要改变时改变3-4秒，但是我第二次将鼠标移到图像上时会立即改变，我认为这是因为浏览器在缓存中存储了图像。所以我在页面上添加了一个javascript来预加载图片onLoad（）ivent -

It is working fine but the problem is when I running it on server images takes 3-4 sec to be changed on change, but the second time I do mouse over images are getting changed instantly, I think this is because of browser stored images in cache. So I added one javascript to preload images on page onLoad() ivent -

<script language = "JavaScript">
function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "images/soluinfo1.jpg";
heavyImage.src = "images/soluinfo2.jpg";
heavyImage.src = "images/soluinfo3.jpg";
heavyImage.src = "images/soluinfo4.jpg";
heavyImage.src = "images/soluinfo5.jpg";
heavyImage.src = "images/soluinfo6.jpg";
heavyImage.src = "images/soluinfo7.jpg";
}
</script>

< body onLoad =javascript：preloader（）>

但是这个脚本还没有解决我的问题。我该怎么办？

but this script has not solved my problem.what should I do?

推荐答案

@ Richard的答案（精灵）可能是你所追求的最好的答案，但你的代码不起作用的原因是在大多数浏览器中，只有最后一个 heavyImage.src =有足够的时间实际注册浏览器作为实际请求。您只创建了一个 Image 对象设置，并且比浏览器可以请求文件更快地重置 .src 属性（我认为现代JavaScript引擎需要额外删除所有中间 .src 语句，因为这样做。

@Richard's answer (sprites) is probably the best one for what you are after, but the reason your code is not working is that in most browsers, only the last heavyImage.src="" is given enough time to actually register with the browser as an actual request. You're creating only one Image object setting and resetting the .src attribute faster than the browser can request the files (I think modern JavaScript engines take the added step of removing all the intermediate .src statements specifically because of this).

有几种方法可以解决这个问题。最简单的方法是创建多个 Image 对象，每个图像对应一个。最简单的方法是通过以下方式：

There are a couple of ways to fix this. The easiest is to create multiple Image objects, one for each image. And the easiest way to do that is through something like this:

<script type="text/javascript">
function preloader() 
{
    function doPreload(strImagePath) 
    {
        var heavyImage = new Image();
        heavyImage.src = strImagePath;
    }

    var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"];
    for (var i = 0; i < arrImages.length; i++) {
        doPreload(arrImages[i]);
    }
}
</script>

将 heavyImage 变量放在自己的变量中函数（记得使用 var 关键字），确保 Image 对象存在于自己的专用范围内。

By putting the heavyImage variable inside its own function (remember to use the var keyword), you're ensuring that the Image object exists inside its own dedicated scope.

另一种方法是将load事件监听器附加到单个 heavyImage 。每次图像完成加载时，请获取下一张图像。这种方法的缺点是你的图像将一次加载一个（导航图像不好，但对于图像库来说很好），而第一种技术将并行获取图像（通常一次只能获取四个） 。

Another way to do this is to attach a "load" event listener to a single heavyImage. Every time the image finishes loading, go fetch the next image. The disadvantage to this method is that your images will be loaded one at a time (bad for navigation images, but great for, say, and image gallery), whereas the first technique will fetch the images in parallel (typicallly four at a time).

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