欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

为啥要实现懒加载??好处是什么?图片懒加载的原理??

程序员文章站 2024-03-18 10:04:46
...

我们之前看到的懒加载一般是这样的形式:

. 浏览一个网页,准备往下拖动滚动条
. 拖动一个占位图片到视窗
. 占位图片被瞬间替换成最终的图片
原因:
比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。更为要命的是:一上来就发送百八十个请求,服务器可能就吃不消了(又不是只有一两个人在访问这个页面)。

因此优点就很明显了:不仅可以减轻服务器的压力,而且可以让加载好的页面更快地呈现在用户面前(用户体验好)。
原理:
  为啥要实现懒加载??好处是什么?图片懒加载的原理??
  主要实现思路:
  如果滚动的大小和屏幕高度之和大于元素到顶部的距离,设置一个定时器,制造懒加载的延迟加载的效果,也就是说,当我们滑动滚动条,看见图片的时候,就让它加载出来

   <img src="/image/8.jpg" data-src="/image/1.png" alt="">
    <img src="/image/8.jpg" data-src="/image/2.png" alt="">
    <img src="/image/8.jpg" data-src="/image/3.png" alt="">
    <img src="/image/8.jpg" data-src="/image/4.png" alt="">
    <img src="/image/8.jpg" data-src="/image/5.png" alt="">
    <img src="/image/8.jpg" data-src="/image/6.png" alt="">
    <img src="/image/8.jpg" data-src="/image/7.png" alt="">

js,主要是用jquery实现的

 $(window).scroll(handleScroll)
    function handleScroll() {
        let imgs = $('img[data-src]');
        console.log(imgs)
        //获取滚动的值
        let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
        console.log(bodyScrollHeight)
        //获取可视高度(屏幕高度)
        let windowHeight = window.innerHeight
        console.log(windowHeight)
        for (let i = 0; i < imgs.length; i++) {
             // 获取元素到浏览器顶部的距离
            let imgHeight = $(imgs[i]).offset().top
           // console.log(imgHeight)
           // 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
            if (imgHeight < windowHeight + bodyScrollHeight) {
                //setTimeout:设置一个定时器,制造懒加载的延迟加载的效果
                setTimeout(function () {
                    $(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
                }, 1000)
            }
        }
    }
    handleScroll()

你们还有那些比较简单的实现思路呢???

相关标签: 前端