代理模式实现图片预加载、懒加载

代理模式实现图片预加载、懒加载
```
预加载：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
             500px;
            height: 300px;
        }
    </style>
</head>
<body>

</body>
</html>
<script>

var myImg = (function(){
    var img = document.createElement("img");
    document.body.appendChild(img);
    return {
        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 = "http://img.article.pchome.net/00/58/32/28/pic_lib/wm/Msn_lundun08.jpg";

proxyImg.setSrc(src);

</script>

懒加载：
```
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0;padding:0;}

        img{

             200px;

            height: 200px;

            display: block;

            float: left;

        }

    </style>

</head>

<body>

    <div>

        <img src="" data-url="img/1.jpg">

        <img src="" data-url="img/2.jpg">

        <img src="" data-url="img/3.jpg">

        <img src="" data-url="img/4.jpg">

        <img src="" data-url="img/5.jpg">

        <img src="" data-url="img/6.jpg">

        <img src="" data-url="img/7.jpg">

        <img src="" data-url="img/8.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

        <img src="" data-url="img/1.jpg">

        <img src="" data-url="img/2.jpg">

        <img src="" data-url="img/3.jpg">

        <img src="" data-url="img/4.jpg">

        <img src="" data-url="img/5.jpg">

        <img src="" data-url="img/6.jpg">

        <img src="" data-url="img/7.jpg">

        <img src="" data-url="img/8.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

        <img src="" data-url="img/1.jpg">

        <img src="" data-url="img/2.jpg">

        <img src="" data-url="img/3.jpg">

        <img src="" data-url="img/4.jpg">

        <img src="" data-url="img/5.jpg">

        <img src="" data-url="img/6.jpg">

        <img src="" data-url="img/7.jpg">

        <img src="" data-url="img/8.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

        <img src="" data-url="img/1.jpg">

        <img src="" data-url="img/2.jpg">

        <img src="" data-url="img/3.jpg">

        <img src="" data-url="img/4.jpg">

        <img src="" data-url="img/5.jpg">

        <img src="" data-url="img/6.jpg">

        <img src="" data-url="img/7.jpg">

        <img src="" data-url="img/8.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

        <img src="" data-url="img/1.jpg">

        <img src="" data-url="img/2.jpg">

        <img src="" data-url="img/3.jpg">

        <img src="" data-url="img/4.jpg">

        <img src="" data-url="img/5.jpg">

        <img src="" data-url="img/6.jpg">

        <img src="" data-url="img/7.jpg">

        <img src="" data-url="img/8.jpg">

        <img src="" data-url="img/9.jpg">

        <img src="" data-url="img/10.jpg">

    </div>

</body>

</html>

<script>

document.onscroll = function(){

    toimg();

}

toimg();

function toimg(){

    var ih = document.documentElement.clientHeight;

    var t = document.documentElement.scrollTop|| document.body.scrollTop;

    var img = document.getElementsByTagName("img");

        for(var i = 0;i<img.length;i++){

            if((!img[i].bStop)&&img[i].offsetTop<(ih+t)){

                var src = img[i].getAttribute("data-url");

                img[i].src = src;

                img[i].bStop = true;

                console.log(112)

            }

        }

}

</script>
相关阅读:
localStorage溢出问题
 面试题梳理
 灵活的楼梯导航条代码
 日期初始化
 css 控制横向布局，超出隐藏，滚动
 自定义滚动条样式
 jquery源码之JQ对象
 jqeury源码之变量解析
 jquery源码之通篇概要
 工作站流处理
原文地址：https://www.cnblogs.com/houjl/p/10137641.html