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

  • 相关阅读:
    奇迹银桥「1」
    20190729-“退役”专场
    20190727-只是睡着了
    $mathcal{Miemeng}$的病态码风计划
    20190725-Silly
    作业-[luogu4396][AHOI2013]-莫队
    数学网学笔记
    20190722-Moni和Boly的故事
    数学学习笔记
    20190719-FirstZero
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4876800.html
Copyright © 2011-2022 走看看