---恢复内容开始---
刚刚说了懒加载，现在我们来搞搞预加载吧
预加载的核心：
- 图片等静态资源在使用前提前请求。
- 资源后续使用可以直接从缓存中加载，提升用户体验。
几个误区： - 预加载不是为了减少页面加载时间
- 预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的
上一份代码给大家理解理解，大家可以跟着注释理解理解，一个很简单的小栗子，别忘了改图片路径
<!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>
---恢复内容结束---
JS代理模式实现图片预加载
原文地址：https://www.cnblogs.com/suihang/p/9625502.html