前端如何实现懒加载、预加载图片

小草莓蹦蹦跳

已于 2023-09-07 15:05:20 修改

阅读量118

点赞数

分类专栏： jQuery JavaScript 前端性能优化文章标签：前端 javascript

于 2020-07-20 14:03:50 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/85234307

版权

JavaScript 同时被 3 个专栏收录

150 篇文章 2 订阅

订阅专栏

前端性能优化

14 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

一、实现懒加载

又称为延迟加载、按需加载。

指的是图片在页面渲染的时候先不加载，页面渲染完成后在指定动作触发后再加载图片。

实现的原理是：

先将图片的实际src，记录在data-set属性中。

监听屏幕滚动，计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的懒加载。

1、引用框架JQuery

图片的src是data-src

$('ul li img').lazyload({
      effect:'fadeIn"
})

lazyload()方法具有懒加载效果：

effetct 淡入淡出效果 fadeIn 图片默认效果

2、原生

原理：按需加载，实现类似于分页的效果。

添加滚动条事件，判断滚动条是否在底部。当滚动条到达底部的时候，页数加1，后台回来的数据合并之前存在的数据展示在页面上。

① 如果判断滚动条到达底部了？

“当前可视区域的高度+滚动条距离顶部的高度 >= 页面的高度” 的时候，说明滚动条到达底部了。为了避免临界值的问题，应该将前面两个数值进行向上取整

当前可视区域的高度$(window).height()

页面的高度$(document).height()

滚动条距离顶部的高度$(window).scrollTop()

② demo

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>懒加载</title>
    <style>
      img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <img src="./img/0.png" data-src="./img/1.png" />
    <img src="./img/0.png" data-src="./img/2.png" />
    <img src="./img/0.png" data-src="./img/3.png" />
    <img src="./img/0.png" data-src="./img/4.png" />
    <img src="./img/0.png" data-src="./img/5.png" />
    <img src="./img/0.png" data-src="./img/6.png" />
    <img src="./img/0.png" data-src="./img/7.png" />
  </body>
  <script>
    // 图片懒加载
    function lazyLoad() {
        let viewHeight = window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight // 获取可视区高度，兼容不同浏览器
        console.log('获取可视区高度', viewHeight)
        let imgs = document.querySelectorAll('img[data-src]')
        imgs.forEach((item, index) => {
            if (item.dataset.src === '') return

            // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
            let rect = item.getBoundingClientRect()
            if (rect.bottom >= 0 && rect.top < viewHeight) {
                item.src = item.dataset.src
                item.removeAttribute('data-src')
            }
        })
    }
    window.addEventListener('scroll', lazyLoad)
  </script>
</html>

二、图片预加载

隐性预加载

先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户，再通过互动(向上滑动数钱)来继续分段加载资源

显性预加载

处于预加载过程时页面有明确的加载提示，比如进度条或者是Loading图标。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>懒加载</title>
    <style>
      img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
        width: 400px;
      }
    </style>
  </head>
  <body>
      <img src="./img/0.png" alt="" class="preLoadImg">
      <img src="./img/0.png" alt="" class="preLoadImg">
      <img src="./img/0.png" alt="" class="preLoadImg">
  </body>
  <script>
    // 图片预加载
    let images = document.querySelectorAll('.preLoadImg')
    function preload() {
        let imgLength = arguments.length
        for (i = 0; i < imgLength; i++) {
            images[i].src = arguments[i]
        }
    }
    preload(
        "https://img2.baidu.com/it/u=380068739,540564660&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
        "https://img2.baidu.com/it/u=2613160854,3715336891&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
        "https://img1.baidu.com/it/u=426807953,2089152937&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
    )

  </script>
</html>

小草莓蹦蹦跳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端如何实现懒加载、预加载图片

监听屏幕滚动，计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的懒加载。“当前可视区域的高度+滚动条距离顶部的高度 >= 页面的高度” 的时候，说明滚动条到达底部了。当滚动条到达底部的时候，页数加1，后台回来的数据合并之前存在的数据展示在页面上。指的是图片在页面渲染的时候先不加载，页面渲染完成后在指定动作触发后再加载图片。滚动条距离顶部的高度$(window).scrollTop()
复制链接

扫一扫

专栏目录