美文网首页
js 代理方式图片预加载

js 代理方式图片预加载

作者: Simon_s | 来源:发表于2016-09-19 20:49 被阅读180次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
    //设置imgNode  相关对象
    var  myImage = (function(){
        var imgNode = document.createElement("img");
        document.body.appendChild(imgNode);
        //向外部返回一个函数,在这个函数中给imgNode节点设置src(包括展位图的src,要展示的src)
        return {
            setImg:function(src){
                imgNode.src = src;
            }
        }
    })();
    
    //代理:给imgNode设置展位图,请求正式图,替换展位图
    var proxyImage = (function(){
        //创建出请求数据的img对象
        var img = new Image();
        //给img的onload事件添加方法:替换imgNode标签上显示的图片
        img.onload = function(){
            //通过myImage中的setImg函数,给imgNode设置url
            myImage.setImg(this.src);
        }
        //向外部返回函数,在这个函数中给imgNode设置展位图,并让img对象请求数据
        return{
            setSrc:function (src){
                myImage.setImg('img/1.gif');
                //让img对象请求传入的src地址
                img.src = src;
            }
        }
    })();
    
    proxyImage.setSrc('http://b.hiphotos.baidu.com/image/h%3D360/sign=f25502b14936acaf46e090fa4cd88d03/18d8bc3eb13533fabb31d2a6aad3fd1f40345bb6.jpg');
</script>

</html>

相关文章

  • js 代理方式图片预加载

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 2018-07-27

    JS实现图片预加载

  • JQ 代理方式图片预加载

    })

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 懒加载和预加载

    1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载:提前加载图片...

  • js图片预加载

    tips:接下去会在github写博客,简书不再更新和修改文章,欢迎大家逛逛我的新博客点击查看 ,我会尽量用更容易...

  • JS图片预加载

  • JS设计模式使用场景

    代理模式 虚拟代理图片预加载如果直接给某个 img 标签节点设置 src 属性,由于图片过大或者网络不佳,图片的位...

  • js-事件委托&图片预加载

    事件委托 图片预加载 吸顶条 图片预加载

网友评论

      本文标题:js 代理方式图片预加载

      本文链接:https://www.haomeiwen.com/subject/impnettx.html