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

Question

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

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

(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);

}());

Answer 1

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