首页 > 其他 > 详细

虚拟代理实现图片预加载

时间:2017-05-07 16:03:02      阅读:333      评论:0      收藏:0      [点我收藏+]

1. 代码如下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>with proxy CREATE PRELoade imgs</title>
 </head>
 <body>
  <script>
    /*
    创建本体对象,负责在页面中创建img标签,
    并且提供setSrc接口设置src属性
    */
    var myImage = (function(){
        var imgNode = document.createElement(img);
        document.body.appendChild(imgNode);

        return{
            setSrc:function(src){
                console.log(this);
                imgNode.src = src;
            }
        }
    })();
    
    /*
        引入代理对象,通过这个对象,图片在正在被加载
        之前,会有有个loading图,提示图片正在加载
    */

    var proxyImg = (function(){
        var img = new Image;
        img.onload = function(){
            myImage.setSrc(this.src);
        }

        return{
            setSrc:function(src){
                myImage.setSrc(imgs/load.gif);
                img.src=src;
            }
        }
    })()
    /*
        from proxyImg  we get myImage
    */
    proxyImg.setSrc(http://files.cnblogs.com/files/vali/timg.bmp);
  </script>
 </body>
</html>

 

虚拟代理实现图片预加载

原文:http://www.cnblogs.com/vali/p/6821045.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!