---恢复内容开始---
刚刚说了懒加载，现在我们来搞搞预加载吧
预加载的核心：
- 图片等静态资源在使用前提前请求。
- 资源后续使用可以直接从缓存中加载，提升用户体验。
几个误区：
- 预加载不是为了减少页面加载时间
- 预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的
上一份代码给大家理解理解，大家可以跟着注释理解理解，一个很简单的小栗子，别忘了改图片路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
//立即执行函数
var myImg = (function(){
//在页面上创建img元素
var img = document.createElement("img");
document.body.appendChild(img);
return {
setImg:function(src){
img.src = src
}
}
})()
//执行完毕后返回
// {
// setImg:function(src){
// img.src = src
// }
// }
// 一个对象 相当于 var myImg = { setImg:function(src){img.src = src}}
// 代理函数
var proxyImg = (function(){
//img对象 提前加载一张图片如果给这个图片加了一个src属性后就相当于在浏览器中缓存了一张图片
var image = new Image();
image.onload = function(){
alert("加载完毕")
myImg.setImg(image.src);
}
return {
setSrc:function(src){
//loding
myImg.setImg("1.png");
//需要加载的图片
image.src = src;
}
}
})()
//定义需要加载的图片路径
var src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3127448566,3364301089&fm=26&gp=0.jpg";
// 调用函数
proxyImg.setSrc(src);
</script>
---恢复内容结束---
原文地址：https://www.cnblogs.com/suihang/p/9625502.html
时间： 2024-10-07 08:51:05