javascript - 使用 blazy 插件加载时用较低分辨率质量的图像替换图像

Question

在这个演示中:

http://dinbror.dk/blazy/examples/?ref=blog

在段落中:

1.3:具有低分辨率图像占位符的延迟加载图像示例

blazy 插件使用较低质量的像素图像来预加载图像，然后立即提供高质量图像。

我不明白这是怎么做到的。像素图像来自哪里？如何用图像达到相同的效果？先降低质量，然后加载合适的尺寸？

Answer 1

你可以使用类似的东西:

<img src='lowres.jpg' id='sampleImage' 
 onLoad='javascript:this.src = "highres.jpg"' />

加载低分辨率版本后，浏览器将执行javascript并加载高分辨率图像，并替换低分辨率。