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

我有一些简单的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>

我似乎在工作，但我看到一个flickring，那么我如何预加载？还有什么会是很好的效果，以顺利的事情呢

---

关于

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

HTML

这种方法不会减慢页面的呈现速度，因为一旦DOM就绪，页面就会运行

---

另外：在现有代码中要小心，因为mouseout上可能尚未定义

tmp\u src

。

绑定事件时，请继续并预先加载图像

$(document).ready(function() {
    console.log("ready!");
    var tmp_src;
    // preload hover graphics
    $('.home-slider li a').each(function () {
      var img = new Image();
      img.src = $(this).data('src');
    });
    $('.home-slider li')...

---

但是，更好的解决方案是使用图像精灵和css悬停，而不是js事件。“平滑效果如何？”？我会将它们包括在页面上，如果需要，运行淡出效果替换，必须将函数（）添加到$（'.home slider li a'）。每个（{因此它读取$（'.home slider li a'）。每个（函数（）{

$(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 + ')');
    });
}); 

$(document).ready(function() {
    console.log("ready!");
    var tmp_src;
    // preload hover graphics
    $('.home-slider li a').each(function () {
      var img = new Image();
      img.src = $(this).data('src');
    });
    $('.home-slider li')...