长图优化（五）：仿微博加载长图方式的实现

2023-10-23 08:30:30

长图优化（五）：仿微博加载长图方式的实现

前言

目前市面上95%以上的APP都具有预览图片的功能，那么是如何实现的呢？今天我们就来仿照微博预览长图，对长图进行优化。效果非常丝滑，原图12M压缩后不到2M，加载前可以压缩一下。我使用的是我自己的另一个图片压缩开源项目，利用哈夫曼算法对图片进行压缩。内存无泄漏，...。

微博长图加载方式

微博长图加载方式的原理是，当用户滚动浏览长图时，只加载当前屏幕可见部分的图片，其他部分的图片则延迟加载。这种方式可以有效减少内存占用，并提高加载速度。

实现原理

实现微博长图加载方式需要用到以下几个技术：

图片懒加载：图片懒加载是指，当图片进入可视区域时才加载图片。
图片分块加载：图片分块加载是指，将图片分成多个小块，只加载当前屏幕可见的图片块。
图片预加载：图片预加载是指，在用户滚动浏览长图时，提前加载下一屏的图片。

实现步骤

将长图分成多个小块。
使用图片懒加载技术，只加载当前屏幕可见的图片块。
使用图片分块加载技术，将图片分成多个小块，只加载当前屏幕可见的图片块。
使用图片预加载技术，在用户滚动浏览长图时，提前加载下一屏的图片。

示例代码

// 图片懒加载代码
function lazyLoadImage() {
  // 获取所有需要懒加载的图片元素
  var images = document.querySelectorAll("img.lazy");

  // 循环遍历图片元素
  for (var i = 0; i < images.length; i++) {
    // 判断图片元素是否进入可视区域
    if (isInViewport(images[i])) {
      // 如果图片元素进入可视区域，则加载图片
      images[i].src = images[i].getAttribute("data-src");
    }
  }
}

// 图片分块加载代码
function chunkLoadImage() {
  // 获取图片元素的总高度
  var totalHeight = document.querySelector("img").offsetHeight;

  // 计算当前屏幕可见的图片块数量
  var visibleChunks = Math.ceil(window.innerHeight / chunkHeight);

  // 循环遍历图片块
  for (var i = 0; i < visibleChunks; i++) {
    // 计算当前图片块的起始位置和结束位置
    var start = i * chunkHeight;
    var end = (i + 1) * chunkHeight;

    // 加载当前图片块
    loadChunkImage(start, end);
  }
}

// 图片预加载代码
function preloadImage() {
  // 获取当前屏幕可见的图片块数量
  var visibleChunks = Math.ceil(window.innerHeight / chunkHeight);

  // 计算下一屏的图片块数量
  var nextChunks = visibleChunks + 1;

  // 循环遍历下一屏的图片块
  for (var i = visibleChunks; i < nextChunks; i++) {
    // 计算下一图片块的起始位置和结束位置
    var start = i * chunkHeight;
    var end = (i + 1) * chunkHeight;

    // 加载下一图片块
    loadChunkImage(start, end);
  }
}

// 加载图片块代码
function loadChunkImage(start, end) {
  // 获取图片块的URL
  var url = "image.jpg";

  // 创建一个新的Image对象
  var image = new Image();

  // 设置Image对象的src属性
  image.src = url;

  // 将Image对象添加到DOM中
  document.body.appendChild(image);
}

// 判断图片元素是否进入可视区域的代码
function isInViewport(element) {
  var rect = element.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}