Question

所以，我试图在悬停时将图像加载到另一个div中，而不会延迟加载时间。

原始代码：

HTML：

<div id="hover" data-img="http://lorempixel.com/output/animals-q-c-370-289-5.jpg">
    HOVER OVER ME
</div>

<div id="image">
    <span>
        <img data-img="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" src="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" />
    </span>
</div>

jQuery的：

$('#hover').on('mouseenter', function() {
    var newImg = $(this).attr('data-img');
    $('#image > span > img').attr("src", newImg);
});
$('#hover').on('mouseleave', function() {
    var oldImg = $('#image > span > img').attr('data-img');
    $('#image > span > img').attr("src", oldImg);
});

正如您所看到的，动物的图像需要一段时间才能加载。我需要完全消除这种延迟，以便在悬停时立即显示动物的图像。

我尝试过的事情：

我尝试将图片文件大小从120kb减少到20kb，仍然没有运气。
我尝试在页面加载时将我的图像加载到隐藏的div中它们已经存在于页面中，而不仅仅是在页面中 data属性，仍然没有运气。

PS。我网站上的版本包含30多张图片，而该示例仅使用两张图片。该示例具有非常小的图像，可以通过快速互联网直接加载。我们办公室的互联网速度很可怕，所以如果图像直接加载，请尝试采购更大的图像以查看手头的问题。

Answer 1

尝试一种简单的预加载技术，如

$('#hover').on('mouseenter', function() {
    var newImg = $(this).attr('data-img');
    $('#image > span > img').attr("src", newImg);
});
$('#hover').on('mouseleave', function() {
    var oldImg = $('#image > span > img').attr('data-img');
    $('#image > span > img').attr("src", oldImg);
});

//preload here
new Image().src = $('#hover').data('img');

Answer 2

你可以做的是放一个实际的<img src="url">并通过css隐藏它。

这样，图像就已经加载了，当您将鼠标悬停在图像上时不会出现延迟。

试试这个：

<div id="hover" data-img="http://lorempixel.com/output/animals-q-c-370-289-5.jpg">
    HOVER OVER ME
</div>

<div id="image">
    <span>
        <img data-img="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" src="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" />
    </span>
</div>
<img src="http://lorempixel.com/output/animals-q-c-370-289-5.jpg" style="display:none">

Live Demo

Answer 3

如果您不想要延迟，则必须在通过悬停显示之前加载图像。 Arun的回答将起作用。

另一种选择是使用图像精灵。将两个图像放在一起作为一个图像文件。然后重新定位它，以便通过CSS显示它的相应部分。

Answer 4

通过设置＆＃34; src＆＃34;属性浏览器解析并尝试加载指定的图像。

我建议你隐藏/显示已包含图像的div元素。

<div id="hover" data-img="img-id-1">
    HOVER OVER ME
</div>
<div id="img-id-1" style="display:none"><img src="/path/to/img.png"/></div>

<div id="image"></div>

$(document).on('mouseenter', '#hover', function() {
    var id = $(this).attr('data-img');
    $('#image').html($(id).html());
});

$(document).on('mouseleave', '#hover', function() {
  $('#image').empty();
});

我没有添加默认图像以首先显示它。但是应该很容易添加。

如何动态地从jQuery加载div中的图像而没有延迟？

4 个答案: