zoukankan      html  css  js  c++  java
  • 图片懒加载

    (function(){
    //common
    function tagName(tagName){
    return document.getElementsByTagName(tagName);
    }
    function $(id){
    return document.getElementById(id);
    }
    function addEvent(obj,type,func){
    if(obj.addEventListener){
    obj.addEventListener(type,func,false);
    }else if(obj.attachEvent){
    obj.attachEvent('on'+type,func);
    }
    }

    //建立某些参数
    var v={
    eleGroup:null,
    eleTop:null,
    eleHeight:null,
    screenHeight:null,
    visibleHeight:null,
    scrollHeight:null,
    scrolloverHeight:null,
    limitHeight:null
    }

    //对数据进行初始化
    function init(element){
    v.eleGroup=tagName(element)
    screenHeight=document.documentElement.clientHeight;
    scrolloverHeight=document.body.scrollTop;
    for(var i=0,j=v.eleGroup.length;i<j;i++){
    if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('asrc')){
    v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('asrc'));
    v.eleGroup[i].removeAttribute('asrc')
    }
    }

    }
    function lazyLoad(){
    if(document.body.scrollTop == 0){
    limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
    }else{
    limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
    }
    for(var i=0,j=v.eleGroup.length;i<j;i++){
    if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('asrc')){
    v.eleGroup[i].src=v.eleGroup[i].getAttribute('asrc');
    v.eleGroup[i].removeAttribute('asrc')
    }
    }
    }
    init('img')
    addEvent(window,'scroll',lazyLoad);
    })()

  • 相关阅读:
    称重量
    计算机网络
    进程间的通信方式与区别
    求两IP是否在同一局域网(运子网掩码用)
    Linux Redhat7 磁盘阵列基本原理
    Linux Redhat7更改root用户密码
    更改Linuxshell类型
    linux系统下的/var/spool/mail/root
    centos 解决"不在 sudoers 文件中。此事将被报告
    redhat 7 安装图形界面
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4876800.html
Copyright © 2011-2022 走看看