Javascript 如何毫不延迟地从jQuery动态加载div中的图像？

所以，我尝试在jQuery中，在悬停状态下，将一个图像加载到另一个div，而不延迟加载时间

原始代码：

HTML:

正如你所见，动物的图像需要一段时间来加载。我需要完全消除这个延迟，以便在悬停时立即显示动物的图像

我尝试过的事情：

• 我尝试将图像文件大小从120kb减小到20kb， 还是不走运
• 我尝试在页面加载时将图像加载到一个隐藏的div，以便 它们已经存在于页面中，而不是仅存在于

  数据

  属性，仍然没有运气

---

---

另外，我网站上的版本包含30多幅图片，而示例中只使用了两幅。这个例子有非常小的图像，可以通过快速互联网直接加载。我们办公室的互联网速度非常糟糕，因此如果图像直接加载，请尝试寻找一些更大的图像来查看手头的问题。

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

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

---

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

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

---

如果您不想延迟，那么您必须在通过悬停显示图像之前加载图像。阿伦的答案会奏效

---

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

如果不想延迟，则必须先加载图像，然后再通过悬停显示。阿伦的答案会奏效

---

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

您可以做的是放置一个实际的

，并通过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">

在我上空盘旋

---

您可以做的是放置一个实际的

并通过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">

在我上空盘旋

通过设置“src”属性，浏览器将解析并尝试加载指定的图像

我建议您像这样隐藏/显示已经包含图像的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();
});

在我上空盘旋
$（document）.on（'mouseenter'，'#hover'，function（）{
var id=$（this.attr（'data-img'）；
$（'#image'）.html（$（id.html（））；
});
$（文档）.on（'mouseleave'，'#hover'，function（）{
$（'#image'）.empty（）；
});

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

通过设置“src”属性，浏览器将解析并尝试加载指定的图像

我建议您像这样隐藏/显示已经包含图像的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();
});

在我上空盘旋
$（document）.on（'mouseenter'，'#hover'，function（）{
var id=$（this.attr（'data-img'）；
$（'#image'）.html（$（id.html（））；
});
$（文档）.on（'mouseleave'，'#hover'，function（）{
$（'#image'）.empty（）；
});

---

我没有添加默认图像以首先显示它。不过，添加起来应该很容易。

现在只需对代码进行一些测试。会让你知道事情的进展：）工作得很顺利。它确实非常容易实现，因为我可以将它放入一个循环中并轻松加载所有图像，而无需改变周围的DOM元素堆。谢谢你的帮助！现在只是对代码进行一些测试。会让你知道事情的进展：）工作得很顺利。它确实非常容易实现，因为我可以将它放入一个循环中并轻松加载所有图像，而无需改变周围的DOM元素堆。谢谢你的帮助！做得很好。但不幸的是，这需要我改变周围一堆DOM元素。阿伦建议的预压技术更适合我。谢谢你的意见：）很好的解决方法。但不幸的是，这需要我改变周围一堆DOM元素。阿伦建议的预压技术更适合我。感谢您的意见：）