代码片段 → jQuery 代码片段 → 图片预加载 图片预加载 Chris Coyier 于 2014年5月12日 一种非常简单的方法来预加载稍后需要的图片(例如,当执行悬停操作时)。 $.preloadImages = function() { for (var i = 0; i < arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
Chris - 这个库很棒 - 内容和组织都很好!
谢谢,谢谢,谢谢!
非常感谢 Chris,这正是我需要的。今天终于完成了实施。查看链接的网站以了解我如何使用它。我的第一个完整项目,所以很多地方都有问题,但我学到了很多东西,并且最近的项目因为这个项目而变得好多了。
这里有一个使用 jQuery 的案例,但没有必要将 preloadImages 附加到 $ 命名空间。从语义上讲,我觉得它应该保持为它自己的函数。
如果我想预加载位于文件夹中的图片,该怎么办?例如,在我的网站上,我所有的图片都位于名为 images 的文件夹中,我想预加载的图片位于名为 nav 的文件夹中。我该如何定位这些图片?
我只是简单地执行以下操作吗?
$.preloadImages("images/nav/1.jpg","images/nav/2.jpg")
谢谢,
Micky
我也有同样的问题。是否有任何地方有答案?
我得到的只有这个。
ReferenceError: 找不到变量:$
这正是你需要做的。
但是,如果所有图像文件的路径都相同,最好将其包含在函数中,而不是在参数列表中为每个图像编写它。文件名扩展名也是如此。因此,您最终可能只会得到
$.preloadImages("1,2");
当所有图像都在同一个文件夹中时,只需
$("").attr("src", "images/nav/".arguments[i]);
Lance:如果你正在为 Web 编写 JavaScript 代码,并且不知道“$”是什么,问问自己是否应该阅读一本针对初学者的前端 Web 开发书籍。“$”由 jQuery 提供——一个非常普遍的库。希望你在发布帖子后的三年里已经了解了这一点。
QS,你真是太厉害了。摸摸它,好好摸摸。
谢谢 Chris,
这真的很有帮助,这正是我想要的。
Rob。
感谢您的帖子。对于将您的网站作为所有 HTML/CSS 事物基本参考的人来说,也许您可以重新审视这篇文章,以包括对 Internet Explorer 中缓存图像的支持以及顺序加载。一个合适的 jQuery 插件架构也将非常棒。
再次感谢您所有的工作/见解。
-jase
我认为您需要检查 if(document.image),然后通过“new Image(imageSourceName)”创建图像。还可以查看 http://docs.jquery.com/Plugins/Authoring …总之,很棒的博客!
太简单了!我喜欢它!谢谢 :) :) :)
我在 MSIE 中收到一个浏览器 JavaScript 错误,提示“'$' 未定义”在代码的第二行。
我是不是错过了什么?
包含 jQuery…
这是否也适用于背景图片?
我该如何更改脚本以预加载背景图片?
谢谢
@tim,它对背景图片的工作方式完全相同。您只需要将图片链接放在要预加载的图片列表中即可
$.preloadImages(“hoverimage1.jpg”,”hoverimage2.jpg”,”backgroundimage1.png”,”backgroundimage2.png”);
这正是我需要的!
可以有充分的理由说明在一次快速循环中预加载所有内容并不总是最佳选择
http://www.photo-mark.com/notes/image-preloading/
当所有图像都在同一个文件夹中时,使用更简单的函数版本(由“无所不知”于 2014 年 11 月 26 日提出)的建议有效——但使用“+”而不是“.”——如下所示
url(”); 的脚本是什么?你能帮我一下吗,谢谢 :)
简单实用!谢谢!=)