在jQuery函数要求它们之前加载图像[重复]

Question

在我的 wordpress 网站中，我使用了一段非常简单的 jQuery 代码：

jQuery(".first-sq").mouseenter(function(){
      jQuery(".first-sq img").attr('srcset', '/wp-content/uploads/2017/01/MachineLearning_hoverx2.png');
 })
 jQuery(".first-sq").mouseleave(function(){
   jQuery(".first-sq img").attr('srcset' , '/wp-content/uploads/2017/01/MachineLearningx2.png');
 })

现在代码可以运行，但问题是当mouseenter 调用时，图像需要一些时间才能加载，您可以看到它正在加载。或者换句话说，图像部分显示。有没有办法在加载文档时加载文档可能使用的所有图像，所以在像我的mouseenter 这样的情况下，图像会立即显示而不必加载？

Answer 1

您可以通过预加载图片来实现这一点。试试这样的：

$(document).ready(function () {
  $('<img src="/wp-content/uploads/2017/01/MachineLearning_hoverx2.png">');
  $('<img src="/wp-content/uploads/2017/01/MachineLearningx2.png">');
});

Answer 2

this的副本

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:
preload([
    'img/img1.jpg'
]);