加载后，如何将多个小分辨率图像源更改为实际的高分辨率图像? [英] How to change Multiple small-res image source with the actual high-res image after they have been loaded?

问题描述

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

I'm working on a webpage that loads high-resolution images after low-res images are applied and set them to the initially loaded small low-res images. This is done to load smaller blurred images faster and replace them with high-res images, unblurred after they have been loaded completely.

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

I'm trying javascript to add this functionality but got stuck. Particularly because I'm new to this. This is what I wrote so far. Any help is appreciated. 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);
}());

灵感

推荐答案

正如评论所建议的那样，渐进式图像加载如 medium blurry-image-加载 .阅读readme.md并将必要的文件添加到您的项目中，然后按照说明进行操作.

As the comment suggests, Progressive image loading like medium can be implemented by using a simple open-source files from GitHub blurry-image-load. Read readme.md and add the necessary files to your project and follow the instruction.

这篇关于加载后，如何将多个小分辨率图像源更改为实际的高分辨率图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！