JS代理模式实现图片预加载
Posted 一只菜鸟攻城狮啊
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS代理模式实现图片预加载相关的知识,希望对你有一定的参考价值。
---恢复内容开始---
刚刚说了懒加载,现在我们来搞搞预加载吧
预加载的核心:
- 图片等静态资源在使用前提前请求。
- 资源后续使用可以直接从缓存中加载,提升用户体验。
几个误区: - 预加载不是为了减少页面加载时间
- 预加载只是提前加载除去首轮加载的图片以后要用到的图片,比如通过点击等事件才会用到的
上一份代码给大家理解理解,大家可以跟着注释理解理解,一个很简单的小栗子,别忘了改图片路径
<!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代理模式实现图片预加载的主要内容,如果未能解决你的问题,请参考以下文章