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

    View Code
     lazyload: function(){//懒加载deal图片
                if (!$('.dynload')[0]) {
                    return;
                }
                var imgs = $('.dynload');
                var langImgs = imgs.length;
                var arrayImgs = new Array();
                var signLang = 0;
                var beginStart = false;
                for (var i = 0; i < langImgs; i++) {
                    arrayImgs[i] = imgs.eq(i);
                }
                function dynLoadImg(){
                    if (beginStart) 
                        return;
                    beginStart = true;
                    setTimeout(function(){
                        for (var j = signLang; j < langImgs; j++) {
                            if (typeof(arrayImgs[j].attr('imgsrc')) != 'undefined' && arrayImgs[j].offset().top < $(document).scrollTop() + $(window).height() + 800) {
                                arrayImgs[j].attr('src', arrayImgs[j].attr('imgsrc')).removeAttr('imgsrc');
                                signLang++;
                            }
                        }
                        beginStart = false;
                        
                    }, 100);
                    
                }
                $(window).scroll(function(){
                    dynLoadImg();
                })
                dynLoadImg();
                
            }

    标记为class="dynload"的img元素被懒加载出来

    html页面源代码如下方式

    <img class="dynload" src="http://xxx.com/img/a.gif" imgsrc="http://xxx.com/img/filename.jpg">

  • 相关阅读:
    阅读ajax.pdf
    XPath 学习
    随想
    Angular JS 学习
    Angular JS 学习
    URL Rewrite in IIS with Regular Pattern
    LinQ In Action 学习第四章
    GC垃圾回收
    jvm底层
    类加载流程
  • 原文地址:https://www.cnblogs.com/dengnan/p/2935263.html
Copyright © 2011-2022 走看看