JS代理模式实现图片预加载

Posted 一只菜鸟攻城狮啊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS代理模式实现图片预加载相关的知识，希望对你有一定的参考价值。

---恢复内容开始---

　　刚刚说了懒加载，现在我们来搞搞预加载吧

　　　　　　预加载的核心：
    1. 图片等静态资源在使用前提前请求。
    2. 资源后续使用可以直接从缓存中加载，提升用户体验。
      几个误区：
    3. 预加载不是为了减少页面加载时间
    4. 预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的

　　　　上一份代码给大家理解理解，大家可以跟着注释理解理解，一个很简单的小栗子，别忘了改图片路径

　　　　

<!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代理模式实现图片预加载的主要内容，如果未能解决你的问题，请参考以下文章

《JavaScript设计模式与开发实践》—— 代理模式

js图片预加载

PHP 之 代理模式

－代理模式

js实现图片预加载

JS实现图片预加载无需等待