加载后如何将多个小分辨率图像源更改为实际的高分辨率图像？

Question

我正在开发一个网页，该网页在应用低分辨率图像后加载高分辨率图像，并将它们设置为最初加载的小型低分辨率图像。这样做是为了更快地加载较小的模糊图像并在完全加载后用高分辨率图像替换它们，不模糊 /strong>。

我正在尝试使用 javascript 添加此功能，但被卡住了。特别是因为我是新手。这是我到目前为止所写的。任何帮助表示赞赏。 T

(function() {
  let image = document.images //all low-res blurred images of class "image"
  let big_image = document.getElementsByClassName("image")

  function loadImage() {
    for (let i = 0; i <= big_image.length; i++) {
      big_image.onload = function() {
        image[i].src = big_image[i].src
        image[i].className = "noBlur" //set class to noblur from image to remove the blur filter
      }
    }
  }

  setTimeout(function() {
    big_image[0].src = "mainPage/res/fireWatch.jpg" //actual high res image srcs
    big_image[1].src = "mainPage/res/mountainMan.jpg"
    big_image[2].src = "mainPage/res/pyramid.jpg"
    big_image[3].src = "mainPage/res/valley.jpg"
    big_image[4].src = "mainPage/res/valley.jpg"
    big_image[5].src = "mainPage/res/valley.jpg"
  }, 50)
  document.addEventListener('DOMContentLoaded', loadImage, false);
}());

inspiration

Answer 1

正如评论所暗示的，像medium 这样的渐进式图像加载可以通过使用来自 GitHub blurry-image-load 的简单开源文件来实现。阅读 readme.md 并将必要的文件添加到您的项目中并按照说明进行操作。