在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

您可以通过预加载图像来实现此目的。尝试类似的东西：

==heading===

Some __useful contents__ and **bold texts** here

Answer 2

this

的副本

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

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