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

预加载：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width: 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>

<head>

<title>Document</title>

<style>

*{margin:0;padding:0;}

img{

width: 200px;

height: 200px;

display: block;

float: left;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

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>

posted @ 2018-12-18 15:51 HOUY 阅读(487) 评论(0) 编辑收藏举报

刷新页面返回顶部

一只搬砖🧱的程序猿

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

公告