javascript - 我如何预加载与 onmouseover/onmouseout 一起使用的图像

Question

我有一些简单的 jquery 需要显示相应的 css 背景图片:

$(document).ready(function() {
                console.log("ready!");
                var tmp_src;
                $('.home-slider li').mouseover(function() {
                    var src = $(this).find('a').attr('data-src');
                    console.log('src: ' + src);
                    $('.content-area').css('background-image', 'url(images/' + src + ')');
                    tmp_src = src;
                });
                $('.home-slider li').mouseout(function() {
                    console.log('src: ' + tmp_src);
                    $('.content-area').css('background-image', 'url(images/' + tmp_src + ')');
                });
            });

html部分是这样的

<ul class="home-slider">
    <li><a href="#" data-src="test.jpg">Project 1</a></li>
    <li><a href="#" data-src="test2.jpg">Project 2</a></li>
    <li><a href="#" data-src="test3.jpg">Project 3</a></li>
</ul>

我似乎可以正常工作，但我看到一个闪光灯，那么我该如何预加载呢？还有什么好的效果可以使事情顺利进行？？？

问候

Answer 1

您可以这样做:为每个图像运行一次 jquery css 命令并将其应用于不可见的 div:

HTML

<ul class="home-slider">
  <li><a href="#" data-src="test.jpg">Project 1</a></li>
  <li><a href="#" data-src="test2.jpg">Project 2</a></li>
  <li><a href="#" data-src="test3.jpg">Project 3</a></li>
</ul>
<div id="preloadbox" style="display:none"></div>

JS

$(document).ready(function() {
    console.log("ready!");

    // preload all images into invisible preloadbox div
    $('.home-slider li a').each(function() {
        var src = $(this).attr('data-src');
        $('#preloadbox').css('background-image', 'url(images/' + src + ')');
        console.log(src + ' preloaded');
    });

    var tmp_src;
    $('.home-slider li').mouseover(function() {
         var src = $(this).find('a').attr('data-src');
         console.log('src: ' + src);
         $('.content-area').css('background-image', 'url(images/' + src + ')');
         tmp_src = src;
    });
    $('.home-slider li').mouseout(function() {
         console.log('src: ' + tmp_src);
         $('.content-area').css('background-image', 'url(images/' + tmp_src + ')');
    });
}); 

这种方法不会减慢页面的呈现速度，因为它会在 DOM 准备就绪后运行。

此外:在您现有的代码中要小心，因为 tmp_src 可能尚未在 mouseout 上定义。