javascript - 使用 jQuery 或 JavaScript 预加载图像

标签 javascript jquery

我需要在幻灯片中使用很多图像,我想在使用之前预加载它。
我使用了这段代码

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

$(['../img/portfolio_arrko_1.jpg', '../img/portfolio_arrko_2.jpg', '../img/portfolio_arrko_3.jpg', '../img/portfolio_arrko_4.jpg', '../img/portfolio_arrko_5.jpg', '../img/portfolio_arrko_6.jpg', '../img/portfolio_arrko_7.jpg', '../img/portfolio_politics_1.jpg', '../img/portfolio_politics_2.jpg', '../img/portfolio_politics_3.jpg', '../img/portfolio_politics_4.jpg', '../img/portfolio_politics_5.jpg', '../img/portfolio_politics_6.jpg', '../img/portfolio_politics_7.jpg', '../img/portfolio_city_1.jpg', '../img/portfolio_city_2.jpg', '../img/portfolio_city_3.jpg', '../img/portfolio_city_4.jpg', '../img/portfolio_city_5.jpg', '../img/portfolio_city_6.jpg', '../img/portfolio_invest_1.jpg', '../img/portfolio_invest_2.jpg', '../img/portfolio_invest_3.jpg', '../img/portfolio_invest_4.jpg', '../img/portfolio_nidec_1.jpg', '../img/portfolio_nidec_2.jpg', '../img/portfolio_nidec_3.jpg', '../img/portfolio_nidec_4.jpg', '../img/portfolio_nidec_5.jpg', '../img/portfolio_nidec_6.jpg', '../img/portfolio_nidec_7.jpg', '../img/portfolio_nidec_8.jpg', '../img/portfolio_nidec_9.jpg', '../img/portfolio_nidec_10.jpg', '../img/portfolio_nidec_11.jpg', '../img/portfolio_zavod_1.jpg', '../img/portfolio_zavod_2.jpg', '../img/portfolio_zavod_3.jpg', '../img/portfolio_zavod_4.jpg', '../img/portfolio_zavod_5.jpg', '../img/portfolio_zavod_6.jpg', '../img/portfolio_zavod_7.jpg', '../img/portfolio_zavod_8.jpg', '../img/portfolio_zavod_9.jpg', '../img/portfolio_razvitie_1.jpg', '../img/portfolio_razvitie_2.jpg', '../img/portfolio_razvitie_3.jpg', '../img/portfolio_razvitie_4.jpg', '../img/portfolio_razvitie_5.jpg', '../img/portfolio_razvitie_6.jpg', '../img/portfolio_rzanik_1.jpg', '../img/portfolio_rzanik_2.jpg', '../img/portfolio_rzanik_3.jpg', '../img/portfolio_rzanik_4.jpg', '../img/portfolio_rzanik_5.jpg', , '../img/portfolio_rzanik_6.jpg', '../img/portfolio_sport_1.jpg', '../img/portfolio_sport_2.jpg', '../img/portfolio_sport_3.jpg', '../img/portfolio_sport_4.jpg', '../img/portfolio_sport_5.jpg', '../img/portfolio_sport_6.jpg', '../img/portfolio_sport_7.jpg', '../img/portfolio_sport_8.jpg', '../img/portfolio_stal_1.jpg', '../img/portfolio_stal_2.jpg', '../img/portfolio_stal_3.jpg', '../img/portfolio_stal_4.jpg', '../img/portfolio_stal_5.jpg', '../img/portfolio_stal_6.jpg', '../img/portfolio_stal_7.jpg', '../img/portfolio_stal_8.jpg', '../img/portfolio_stal_9.jpg', '../img/portfolio_hleb_1.jpg', '../img/portfolio_hleb_2.jpg', '../img/portfolio_hleb_3.jpg', '../img/portfolio_hleb_4.jpg', '../img/portfolio_hleb_5.jpg', '../img/portfolio_hleb_6.jpg', '../img/portfolio_elit_1.jpg', '../img/portfolio_elit_2.jpg', '../img/portfolio_elit_3.jpg', '../img/portfolio_elit_4.jpg', '../img/portfolio_elit_5.jpg']).preload();

但我不确定它会起作用吗?也许有更好的方法吗?

最佳答案

这会起作用,但请注意,此过程不会推迟 DOM-ready-event。这意味着在图像尚未加载时可能会显示其实际使用的地点。

此方法适用于动态 Web 应用程序,即最初不显示图像,但是当发生某些页面事件时(例如,当创建并显示包含预缓存图像之一的新小部件时。)

关于javascript - 使用 jQuery 或 JavaScript 预加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22809487/

相关文章:

jquery - 拖放克隆

javascript - jqGrid的columnChooser第一次不显示效果

javascript - 在鼠标悬停时在图像中心显示图标字体

asp.net - Javascript 日期本地化

javascript - 创建一个倒数计时器(占 SetInterval/Timeout Google Chrome 选项卡 "error")

javascript - 自动刷新 <div> 文本

javascript - API 请求循环 Node.js 和 LiveChat API

jquery - 如何将<Input>提交按钮设置为文本大小

javascript - ajax获取另一个网站的内容并使用选择器

javascript - 使用CKEditor v4.2上传图片时添加上传图标