码迷,mamicode.com
首页 > 其他好文 > 详细

虚拟代理实现图片预加载

时间:2017-05-07 16:10:15      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:body   func   reg   logs   element   tor   doc   nload   editplus   

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>

 

虚拟代理实现图片预加载

标签:body   func   reg   logs   element   tor   doc   nload   editplus   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!