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);
    })()

  • 相关阅读:
    Icinga使用总结
    Linux入门:usermod
    JMeter入门(01)概念和样例
    英语日常词汇:living-room、dining-room vs dining hall
    安装 docker-compose
    CentOS7下安装python-pip
    JMeter入门(03)多台JMeter联合测试
    jmeter入门(02)测试报告各项指标含义
    istio入门(01)istio的优势在哪里?
    Docker学习笔记
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4876800.html
Copyright © 2011-2022 走看看