码迷,mamicode.com
首页 > 其他好文 > 详细

图片延迟加载(lazyload)

时间:2016-12-10 13:17:00      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:大于   ports   name   应该   length   html   val   load   page   

1.js代码:

<script>
    var imgs = document.getElementsByTagName(‘img‘);
    // 获取视口高度与滚动条的偏移量
    function lazyload(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        for(var i=0; i<imgs.length; i++) {
            var x =scrollTop+viewportSize-imgs[i].offsetTop;
            if(x>0){
                imgs[i].src = imgs[i].getAttribute(‘loadpic‘);   
            }
        }
    }
    setInterval(lazyload,1000);
</script>

 

2.jquery代码:

$(document).ready(function(){
    // 获取页面视口高度
    var viewportHeight = $(window).height();
    var lazyload = function() {
        // 获取窗口滚动条距离
        var scrollTop = $(window).scrollTop();
        $(‘img‘).each(function(){
        // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度         
        var x = scrollTop + viewportHeight - $(this).position().top;
        // 如果大于0 即该元素能被浏览者看到,则将暂存于自定义属性loadpic的值赋值给真正的src            
        if (x > 0)
        {
            $(this).attr(‘src‘,$(this).attr(‘loadpic‘)); 
        }
    })
    }
    // 创建定时器 “实时”计算每个元素的src是否应该被赋值
    setInterval(lazyload,100);
});

 

原文地址:http://www.cnblogs.com/jxlwqq/p/4318979.html

图片延迟加载(lazyload)

标签:大于   ports   name   应该   length   html   val   load   page   

原文地址:http://www.cnblogs.com/taoxiaodan/p/6155324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!