lazyLoad——减少页面请求时间,节省流量。

为什么要使用懒加载而不直接加载?
当然没规定一定要懒加载,肯定是根据实际情况来决定使用的与否。
当你一个页面有庞大的数据需要请求加载(比如花瓣、Pixiv等网站),你如果一次请求,先不说你要多久才能请求完整个页面,你有那么多流量吗?什么,你还不是无限流量,那你可以把自己卖给移动、电信、联通了。
在这里插入图片描述
使用懒加载加载图片有什么好处呢?
1 增强用户体验
2 优化代码
3减少http的请求
4减少服务器端压力
5服务器的按需加载

看到一个api很厉害,我们判断懒加载的执行一般是滚动条是否到底,或者浏览器的可视区,

IntersectionObserver

监视某个页面元素是否进入了可见窗口

这个api很厉害:(可见该博主的博客)
https://www.cnblogs.com/xupeiyu/p/5985652.html

当然,今天我只是简单的用jquery封装一个懒加载插件,不足之处请多多指教

function lazyLoad() {
    //当前窗口的高度
    var windowHeight = $(window).height();
    // 文档(document)的高
    var bodyHeight = $(document).height();
    //没有滚动条的情况下(图片不满屏),直接加载
    if(bodyHeight <= windowHeight){
        $('.lazyImg').each(function () {
            var that = $(this);
            //
            if(that.attr('data-src')!=that.attr("src")){
                //所需地址存在࿰
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值