如何在下载高分辨率时显示低分辨率图片

How to show a low resolution pictures when downloading high resolution?

本文关键字：分辨率 显示 下载 高分辨率      更新时间：2023-09-26

我有相当大的图像要下载并显示在img标记中。

图像它不是渐进式JPEG，所以您可以在下载时看到正在渲染的图像。

当从服务器获取图像时，我想显示一个低分辨率版本，可能只使用CSS或HTML属性。

知道怎么解决吗？

示例：

http://jsfiddle.net/hncajo9f/1/

您也不能使用JavaScript来获取，因为它需要下载完整的图像来创建缩略图或某种低质量的图像。如果你的服务器端有一个PHP后端，你可以使用GD创建一个低质量的图像，并在加载原始图像之前在这里显示它。

另一种最好的方法是在src属性中使用低质量图像（单独的副本），然后延迟加载原始图像。此外，这里可以使用lowsrc属性，但我不确定浏览器是否提供支持。

查看srcset属性并阅读此

响应图像：用例和文档代码段让你开始

<img src="opera-1x.jpg" alt="The Oslo Opera House" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">

或

"SRCSET"属性解决响应图像DILEMMA

只需在IMG标记中声明低分辨率版本（指定高分辨率的维度），然后在稍后修改URL（例如window.onload事件）。如果为低分辨率版本指定数据uri，则可以避免额外的获取。

<img 
     realurl='http://upload.wikimedia.org/wikipedia/commons/4/43/Very_Large_Array,_2012.jpg'
     src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" 
 />
<script>
function hires_images()
{
    var imgs = document.getElementsByTagName('img');
    for (i = 0; i < imgs.length; i++) { 
        if (imgs[i].realuri) {
            imgs[i].src=imgs[i].realuri;
        }
     }
}
if (window.addEventListener) {
     window.addEventListener('load', hires_images, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', hires_images);
}
相关文章：