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

标签 javascript image lazy-loading blazy

在这个演示中:

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

在段落中:

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

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

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

最佳答案

你可以使用类似的东西:

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

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

关于javascript - 使用 blazy 插件加载时用较低分辨率质量的图像替换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46084465/

相关文章:

javascript - 如何在 Javascript Laravel Blade 中编写路由 URL?

javascript - 自动调整div的大小

javascript - 如何使用 jquery resize run 函数一次?

javascript - 延迟加载的javascript上的运行时错误处理?

angular - 如何使 @ngrx/store 在 RC.6 上使用延迟加载

javascript - 选择 div 的特定区域

html - 如何在 HTML 中强制打印背景图像?

Java Graphics2d 使用证卡打印机将高分辨率图像打印到 CR80 卡中

html - Flexbox 元素不适应图像高度/稍大

cordova - Ionic 3 延迟加载插件