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准备好后就会运行。

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

Answer 2

绑定事件时，请提前预先加载图像。

$(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事件。

我如何预加载onmouseover / onmouseout使用的图像

2 个答案: