Question

我有一个非常大的图像下载并显示在img标记中。

图像不是渐进式JPEG，因此您可以看到在下载时呈现的图像。

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

知道怎么解决吗？

示例：

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

Answer 1

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

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

Answer 2

查看srcset属性并阅读此

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

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

或

‘SRCSET’ ATTRIBUTE SOLVING RESPONSIVE IMAGE DILEMMA

Answer 3

只需在IMG标签中声明低分辨率版本（指定hi res的尺寸），然后在稍后修改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);
}

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

3 个答案: