javascript - 如何从 jQuery 动态无延迟地加载 div 中的图像？

Question

因此，我尝试在悬停时将 jQuery 中的图像加载到另一个 div，而不会延迟加载时间。

<强> HERE IS A WORKING EXAMPLE

原始代码:

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');