缓慢加载图像,显示临时图像的最佳方式? 也许JQuery?
我正在使用Google Charts在我的应用程序中显示图表数据。 有时谷歌很慢,图表需要一段时间才能加载。 这种情况似乎是一种常见的模式 – 所以我想知道什么是显示临时图像的好方法,而图像是从Google传送的。 我可以访问jQuery – 并且已经看到了许多“预加载”插件。 这是我需要的吗?
这个场景/模式的正确术语是否真的称为“图像预加载”?
我很想听听人们用来解决这种情况的方法。
谢谢
您可以在加载图像时显示http://ajaxload.info/上找到的其中一个花哨的加载GIF。 加载图像后,隐藏加载gif并显示图像本身。
查看http://jqueryfordesigners.com/image-loading/获取教程。
图像预加载通常是在您下载图像时预期被请求但在用户实际请求查看图像之前。 我相信当前的想法通常会增加开销,除非您的用户中有很大一部分可以查看图像。
图像有一个onload
事件,一旦图像加载完毕就会触发。
你可以听那个事件,直到它开始显示另一个图像。
不,你不想预加载(这假设在指定的图像加载时停止页面加载)。 你需要显示一个加载图形。
$(.loading).css({ 'background-image':'myLoading.gif', 'background-repeat: 'no-repeat', height: 25, width: 25 }).load(function(){ $(this.css({ 'background-image': null, height: 'auto', width: 'auto' }); });
或者这样的效果……注意高度和宽度应该是借用图像的大小…除非你知道你拉下的图像的大小。
预加载不是要走的路。 如果您的图像在应用程序中直接可见,您的浏览器将尽快加载它,并且无法使用Javascript加载它。
你可以做的是加载它更慢。
您似乎认为图像加载速度很慢,因为您希望它是即时的。 难以比立即更快。
也许你可以尝试另一种方式。 设计应用程序,以便在用户与某些内容交互时显示图表(单击按钮,链接等),然后在用户请求时加载图表。
我看到了两个优点,主要是针对低带宽用户(移动用户?):
- 不想要图表的用户不会受到长时间加载过程的干扰
- 你知道在加载图像时页面布局会发生变化
- 应用程序的初始带宽使用率将降低,这将使其看起来更具响应性
- 最初加载的图像越少,浏览器准备得越快
从AppleInsider移动版本无耻地窃取的想法
直观的解决方案负载(非常)大图像。 例如:
- 缩略图是100 x 75,大图像加载大小960×720,
- onClick缩略图 – 我们开始
load('/images/audi_big.jpg')
大图, - 之后替换oryginal图像
$("#big_image img").attr({src: '/images/audi_120px.jpg'});
我们有缩略图宽度=“960” 。 - 在那个添加可选层的信息
LOADING {CSS}z-index: 1
, - 如果加载了大图像:
$("#big_image img").attr({src: '/images/audi_big.jpg'});