前端体验优化-懒加载和预加载

1. 懒加载

懒加载的原理很简单，就是当图片滚动到视口中时，将img的src替换成真是的图片地址。通常我们将真实的图片地址存放于data-original这个属性中

const viewHeight = document.documentElement.clientHeight;
function lazyLoad() {
  const elements = document.querySelectorAll("img[data-original][lazyload]");
  [...elements].forEach(element => {
    if (element.dataset.original === "") return;
    const rect = element.getBoundingClientRect();
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      replaceAttrs(element);
    }
  });
}

// 将img中的data-original的值赋给src
// 并将data-original属性移除，防止该元素多次进行懒加载
function replaceAttrs(element) {
  const originalUrl = element.getAttribute("data-original");
  const image = new Image();
  image.src = originalUrl;
  image.onload = function() {
    element.src = originalUrl;
  };
  element.removeAttribute("data-original");
  element.removeAttribute("lazyload");
}

lazyLoad();
document.addEventListener("scroll", lazyLoad, false);

2. 预加载

预加载通常是在元素展示之前，就将相关的资源加载好的一种方案，对于用户体验更加友好。常用的预加载方案有以下几种

1. 监听图片加载完毕的时间，加载完毕之后再展示图片

<img src="url" style="display:none;" />

2. 使用js加载图片

function preloadImg (url, callback) {
    const image = new Image();
    image.src = url;
    image.onLoad = callback;
}

3. 使用ajax请求来预加载图片，这个过程可以对图片的加载有一个更精细化的控制

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if ([200, 206, 304].includes(xhr.status)) {
      const responseText = xhr.responseText;
      console.log("ready!");
    }
  }
}
xhr.onprogress = function(e) {
  e = e || event;
  console.log(e);
  if (e.lengthComputable) {
    console.log(`Received ${e.loaded} of ${e.total} bytes.`);
  }
}
xhr.open("GET", "http://localhost:63343/helloworld.jpeg", true);
xhr.send();