小说APP源码的图片加载方式，懒加载和预加载的实现

最新推荐文章于 2023-05-28 11:33:17 发布

云豹科技程序猿

最新推荐文章于 2023-05-28 11:33:17 发布

阅读量487

点赞数 1

分类专栏：小说系统源码文章标签：音视频性能优化语音识别

原文链接：https://juejin.cn/post/7034458895279980552#heading-50

版权

小说系统源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于小说APP源码中会涉及很多的图片加载，在打开程序时，如果一次性将首页图片全部加载出来不仅会消耗大量的流量，甚至还会增加首页打开的延迟，影响到用户的体验，因此在小说APP源码开发中，我们经常会用懒加载和预加载的方式进行图片的加载。

图片懒加载

什么是图片懒加载

图片懒加载又叫图片延迟（按需）加载
在需要的时候加载图片
更好的加载小说APP源码页面的首屏内容，无需考虑整个页面

图片懒加载的实现

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>图片懒加载</title>
      <style>
          * {
              padding: 0;
              margin: 0;
          }

          img {
              width: 100%;
              height: 183px;
          }
      </style>
    </head>
    <body>

    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/1.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/2.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/3.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/4.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/5.jpg"
        class="lazyload"
      />
    </div>

    <script>
      // 图片要设置高度
      const imgs = [...document.querySelectorAll(".lazyload")];

      lazyload();

      window.addEventListener('scroll', lazyload, false);
     


      function lazyload() {
        for (let i = 0; i < imgs.length; i++) {
          const $img = imgs[i];

          if (isInVisibleArea($img)) {
            $img.src = $img.dataset.src;
            imgs.splice(i, 1);
            i--;
          }
        }
      }

      // DOM 元素是否在可视区域内
      function isInVisibleArea($el) {
        const rect = $el.getBoundingClientRect();
        // console.log(rect);

        return (
          rect.bottom > 0 &&
          rect.top < window.innerHeight &&
          rect.right > 0 &&
          rect.left < window.innerWidth
        );
      }
     
    </script>
  </body>
</html>

加上防抖和节流进行性能优化试试


 window.addEventListener("scroll", debounce(lazyload), false);

// 不适用
// window.addEventListener('scroll', throttle(lazyload), false);

// 防抖 debounce
// 在某个时间期限内，事件处理函数只执行一次
function debounce(fn, miliseconds = 250, context) {
    let timer = null;

    return function (...args) {
        const self = context || this;

        if (timer) {
            clearTimeout(timer);
        }

        timer = setTimeout(() => {
            fn.apply(self, args);
            timer = null;
        }, miliseconds);
    };
}

// 节流 throttle
// 事件处理函数执行一次后，在某个时间期限内不再工作
function throttle(fn, miliseconds = 250, context) {
    let lastEventTimestamp = null;

    return function (...args) {
        const self = context || this;
        const now = Date.now();

        if (!lastEventTimestamp || now - lastEventTimestamp >= miliseconds) {
            lastEventTimestamp = now;
            fn.apply(self, args);
        }
    };
}

图片预加载

什么是图片预加载

提前加载将来可能会用到的图片

图片预加载的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片预加载</title>
    <style>
      .img-container {
        display: flex;
        align-items: center;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img src="./images/1.jpg" alt="图片" id="img" />
    </div>

    <script>

      const imgs = [
        './images/2.jpg',
        './images/3.jpg',
        './images/4.jpg',
        './images/5.jpg'
      ];
      let i = 0;
      const $img = document.getElementById('img');
		
      // 页面一开始调用preload加载数组的第一个元素
      preload(imgs[i])
        .then(data => {})
        .catch(() => {});

      // 点击切换
      $img.addEventListener(
        'click',
        () => {
          // 当索引小于数组length
          if (i < imgs.length) {
            // 将数组元素的src赋值给页面元素
            $img.src = imgs[i];
            // i+1 下次点击变为数组的第二个元素 依次递增
            i++;
			   // 当索引小于数组length
            if (i < imgs.length) {
              // 预加载下一个图片
              preload(imgs[i]);
            }
          } else {
            // 当 索引和 数组length相同 则数组内没元素了
            console.log('已经是最后一张了！');
          }
        },
        false
      );

      // 预加载
      function preload(src) {
        // Promise进行包装
        return new Promise((resolve, reject) => {
          // 创建一个新的图片标签
          const image = new Image();
			
          // 图片加载完成调用成功状态
          image.addEventListener('load', () => resolve(image), false);
          // 图片加载失败调用失败状态
          image.addEventListener('error', () => reject, false);
			// 将传进来的src赋值给新的图片
          image.src = src;
        });
      }
    </script>
  </body>
</html>

以上便是“小说APP源码的图片加载方式，懒加载和预加载的实现”的全部内容，选择合适的图片加载方式才能实现用户体验的优化，希望能对大家开发小说APP源码带来帮助。

云豹科技程序猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小说APP源码的图片加载方式，懒加载和预加载的实现

由于小说APP源码中会涉及很多的图片加载，在打开程序时，如果一次性将首页图片全部加载出来不仅会消耗大量的流量，甚至还会增加首页打开的延迟，影响到用户的体验，因此在小说APP源码开发中，我们经常会用懒加载和预加载的方式进行图片的加载。图片懒加载什么是图片懒加载图片懒加载又叫图片延迟（按需）加载在需要的时候加载图片更好的加载小说APP源码页面的首屏内容，无需考虑整个页面图片懒加载的实现<!DOCTYPE html><html lang="en"> <head
复制链接

扫一扫