zoukankan      html  css  js  c++  java
  • js图片实现延迟加载

     1 <script type="text/javascript">
     2         function delayload(option){
     3             //读取参数
     4             //图片未加载时显示的图片
     5             var src = option.src ? option.src : '',
     6             //指定那些id下的img元素使用延迟显示
     7                 id = option.id ? option.id : [];
     8             //图片列表
     9             var imgs = [];
    10             //获得所有的图片元素
    11             for(var i=0 ; i < id.length ; i++){
    12                 var idbox = document.getElementById(id[i]),_imgs;
    13                 if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
    14                     for(var t=0 ; t < _imgs.length ; t++){
    15                         imgs.push(_imgs[t]);
    16                     }
    17                 }
    18             }
    19             //将所有的图片设置为指定的loading图片
    20             for(var i=0 ; i < imgs.length ; i++){
    21                 //图片本来的图片路径放入_src中
    22                 imgs[i].setAttribute('_src',imgs[i].src);
    23                 imgs[i].src = src;
    24             }
    25             //取元素的页面绝对 X位置
    26             var getLeft = function(El){
    27                 var left = 0;
    28                 do{
    29                     left += El.offsetLeft;
    30                 }while((El = El.offsetParent).nodeName != 'BODY');
    31                 return left;
    32             };
    33             //取元素的页面绝对 Y位置
    34             var getTop = function(El){
    35                 var top = 0;
    36                 do{
    37                     top += El.offsetTop;
    38                 }while((El = El.offsetParent).nodeName != 'BODY');
    39                 return top;
    40             };
    41             //是否为ie,并读出ie版本
    42             var isIE = !!navigator.userAgent.match(/MSIEs*([0-9].[0-9]);/img);
    43             isIE && (isIE = RegExp.$1);
    44             //是否为chrome
    45             var isGoo = !!navigator.userAgent.match(/AppleWebKit/img);
    46             //获得可以触发scroll事件的对象
    47             var box = isIE ? document.documentElement : document;
    48             //body元素的scroll事件
    49             var onscroll = box.onscroll = function(){
    50                 //读取滚动条的位置和浏览器窗口的显示大小
    51                 var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
    52                     left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
    53                     width = document.documentElement.clientWidth,
    54                     height = document.documentElement.clientHeight;
    55                 //对所有图片进行批量判断是否在浏览器显示区域内
    56                 for(var i=0 ; i < imgs.length; i++){
    57                     var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
    58                     //判断图片是否在显示区域内
    59                     if( _top >= top &&
    60                         _left >= left &&
    61                         _top <= top+height &&
    62                         _left <= left+width){
    63                         var _src = imgs[i].getAttribute('_src');
    64                         //如果图片已经显示,则取消赋值
    65                         if(imgs[i].src !== _src){
    66                             imgs[i].src = _src;
    67                         }
    68                     }
    69                 }
    70             };
    71             var load = new Image();
    72             load.src = src;
    73             load.onload = function(){
    74                 onscroll();
    75             };
    76         }
    77         delayload({id:['out1','out2'],src:'http://www.cmiley.com/php/archive/16/416/ccdfaf4d2ee879c21ae1b523a372d3fc.160.gif'});
    78       </script>
  • 相关阅读:
    Poj3678:Katu Puzzle
    2-SAT
    Bzoj3238: [Ahoi2013]差异
    expressJS
    expressJS
    expressJS
    [转]View属性 之 paddingStart & paddingEnd
    在Activity之间使用Intent传值和Bundle传值的区别和方式
    [转]Java初始化顺序总结
    final关键字修饰的变量
  • 原文地址:https://www.cnblogs.com/Life-Record/p/5727806.html
Copyright © 2011-2022 走看看