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

Posted 2023-05-07

【中文标题】在jQuery函数要求它们之前加载图像[重复]

【英文标题】：Load images before jQuery function ask for them [duplicate]

【发布时间】：2017-07-12 08:59:51

【问题描述】：

在我的 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 这样的情况下，图像会立即显示而不必加载？

【问题讨论】：

预加载图片，查看question 获取有关如何执行此操作的答案

您选择的搜索引擎 -> javascript 图片预加载

您可以使用 JavaScript 预加载图像，但更好的方法是将两个图像组合成一个图像，设置为 background-image 的 div 并移动位置。关键字：css sprites

你为什么不使用jQuery onload 函数来加载图像，然后在mouseenter 上将显示样式更改为none / block ？

【参考方案1】：

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

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

【参考方案2】：

this的副本

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


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

【讨论】：

请不要plagiarise answers。如果您引用另一个答案，至少给原作者留下一个信用。如果您认为有必要，您也可以投票将问题作为重复问题结束，这似乎是这里的情况

我确实将它作为带有链接的副本发布...：|我只是不喜欢废话，所以我删除了它......而且我不知道重复的东西。

没问题，只是想我会让您知道以供将来参考