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

  • 相关阅读:
    C语言-const和volatile深度分析
    C语言循环语句工程用法
    C分支语句的工程用法
    函数对象分析
    关于protel电路图导入word
    单片机程序编写与下载
    关于Protel输出PDF原理图
    关于定时器、外部中断的一些理解
    锁存、译码介绍
    关于Proteus电压设置
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4876800.html
Copyright © 2011-2022 走看看