WEB前端 图片延迟加载(lazyload)实现

前端支付宝开发视频教程|网站前端开发模板|web前端开发学习网站

核心原理是:

1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视口(也就是浏览器中的 展现网站的空白部分 )中;

2 为<img>标签设置一个暂存图片URL的自定义属性(例如loadpic),当图片出现在视口时,再将loadpic的值赋给图片的src属性;

最后,贴出分别用原生jsjquery实现该功能的实现方法:

1 原生JavaScript的实现方法

<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的实现方法

/**

  • 图片的src实现原理
    */
    $(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);
    });
    当然,上述代码还是很简陋,仅仅说了实现的原理,生产环境推荐使用: jquery_lazyload
    http://www.tuicool.com/articles/aMvaM3i

附插件使用地址http://code.ciaoca.com/jquery/lazyload/

网站开发前端模板|慕课网电商网站前端开发源码|网站前端开发步骤

» 本文来自:前端开发者 » 《WEB前端 图片延迟加载(lazyload)实现》
» 本文链接地址:https://www.rokub.com/4472.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!