javaScript的预加载
2024-10-07 13:25:05
在有大量图片的页面中,为了避免页面加载完图片还未加载完成,我们通常会使用js的图片预加载。
这是一个预加载的demo:
首先把图片放入到一个类名为imgSrcArr的变量当中:
var imgSrcArr = [
‘./imgs/01.png’,
‘./imgs/02.png’,
‘./imgs/03.png’,
‘./imgs/04.png’,
‘./imgs/05.png’
]
再用一个变量来储存要遍历的图片:
var imgWrap = [];
用一个函数来执行这个方法:
function preloadImg(arr) {
for(var i = 0; i < arr.length; i ++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
页面加载时执行此函数:
window.onload = function() {
preloadImg(imgSrcArr);
}
在页面执行此函数:
$(function(){
var imgSrcArr = [
‘./imgs/01.png’,
‘./imgs/02.png’,
‘./imgs/03.png’,
‘./imgs/04.png’,
‘./imgs/05.png’
];
var imgWrap = [];
function preloadImg(arr) {
for(var i = 0; i < arr.length; i ++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
window.onload = function() {
preloadImg(imgSrcArr);
}
})
最新文章
- 读取properties配置文件的方法
- Android基于mAppWidget实现手绘地图(十二)–显示当前用户位置
- TopCoder
- Python类属性,实例属性
- ILNumerics项目的应用之线性方程
- 使用存取方法来设置Property value
- 《jave程序设计》第一周学习总结
- Handler具体解释
- Feature Flag
- 数据结构算法及应用&mdash;&mdash;二叉树
- 修改EBS R12 URL连接端口
- ADO工具类
- JS中的三种循环
- spring cloud服务提供与调用示例
- 《AngularJS开发下一代Web应用》读书笔记与感想
- CentOS下安装mysql5.7和mysql8.x
- shell 常见面试
- IOS 集成支付宝和邮件发送
- iOS: Sorted Array with Compare
- Windows 7 完美安装 Visual C++ 6.0