更改< img>的src属性并显示新图片_as loaded_ [英] Changing an <img>'s src attribute and dispaying the new image _as it loads_

问题描述

 < img src =placeholder.jpgdata-url = /get_image/{{image.id}}//> 
  

/ get_image / {{image.id}} 返回一些JSON和实际图像的URL，然后替换< img> src c>使用jQuery的标记。

我遇到的问题是图像只有在完全下载后才显示在浏览器中。对于大图像，尽管事实上 placeholder.jpg 显示正在加载...，但这可能需要一段时间，一些用户认为图像从不加载。 p>

如果替换占位符的图像实际上可见地加载（例如像大多数JPEG一样从上到下加载），而不是仅仅突然显示它已被下载。

显示进度条的方式会更好。

有人有提示吗？

解决方案

您可以使用preloader，但仍应等待图像完全加载。

其他解决方案依赖于您如何保存图像。

您可以在像photoshop这样的应用程序中打开图像，文件，单击PROGRESSIVE选项（即使没有完全加载，Progressive选项也会使图像可见）。

在Photoshop中：

1. 打开图片


2. 点击文件 - > save For Web ...（或保存为以前版本的Web和设备）


3. 在打开的对话框的右上角，选择'JPEG'格式


4. 您会看到一些选项，选择'渐进式'


5. 保存

这个选项会使文件的大小稍大，但浏览器会在加载时显示图像。 b $ b

I'm displaying images like this:

<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />

/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.

The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."

It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.

A way to show a progress bar would be even better.

Does anybody have suggestoins?

解决方案

You can use preloader, but still should wait for image to load completely.

Other solution relies on how you saved the images.

You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).

In Photoshop:

1. Open the image
2. Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
3. On the upper right part of the opened dialog, choose the 'JPEG' format
4. You will see some options, choose 'Progressive'
5. Save

This option will make the file slightly bigger in size, but the browser will show the images as they load.

这篇关于更改< img>的src属性并显示新图片_as loaded_的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！