Question

我正在使用Google Charts在我的应用程序中显示图表数据。有时谷歌很慢，图表需要一段时间才能加载。这种情况似乎是一种常见的模式 - 所以我想知道什么是显示临时图像的好方法，而图像是从Google传送的。我可以访问jQuery - 并且已经看到了许多“预加载”插件。这是我需要的吗？

此场景/模式的正确术语是否真的称为“图像预加载”？

我很想听听人们用什么来解决这种情况。

感谢

Answer 1

您可以在加载图片时显示http://ajaxload.info/处找到的其中一个花哨的加载GIF。加载图像后，隐藏加载的gif并显示图像本身。

检查http://jqueryfordesigners.com/image-loading/以获取教程。

Answer 2

图像预加载通常是在您预期被请求时下载图像但在用户实际请求查看图像之前。我相信当前的想法通常会增加开销，除非很大一部分用户可以查看图像。

Answer 3

图像有一个onload事件，一旦图像加载完毕就会触发。

你可以听取那个事件，直到它发射出来显示另一个图像。

<script>
function showImage() {
    $("#blah").show();
    $("#temp").hide();
}
</script>

<img id="temp" src="temp_image.png" />
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/>

Answer 4

不，你不想预加载（这假设在指定的图像加载时停止页面加载）。你需要显示一个加载图形。

$(.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'
   });
 });

或者那样的效果......注意高度和宽度应该是借用图像的大小...除非你知道你拉下的图像的大小。

Answer 5

预加载不是要走的路。如果您的图片在您的应用程序中直接可见，您的浏览器将尽快加载它，并且无法使用Javascript加载它。

你可以做的是加载它。

您似乎认为图像加载速度很慢，因为您希望它是即时的。很难比立即更快。

也许你可以尝试另一种方式。设计应用程序，以便在用户与某些内容进行交互时显示图表（单击按钮，链接等），然后在用户请求时加载图表。

我认为这有两个好处，主要是针对低带宽用户（移动用户？）：

不希望图表的用户不会受到长时间加载过程的干扰
- 你知道在加载图片时页面布局会发生变化
应用程序的初始带宽使用率会降低，这会使其看起来更具响应性
- 最初加载的图片越少，浏览器准备就越快

从AppleInsider移动版

无耻地窃取的想法

Answer 6

直观的解决方案负载（非常）大图像。例如：

缩略图是100 x 75，大图像加载大小960x720，
onClick缩略图 - 我们启动load('/images/audi_big.jpg')大图片，
之后替换原始图像$("#big_image img").attr({src: '/images/audi_120px.jpg'});，我们有缩略图 width =“960”。
在此添加包含信息LOADING {CSS}z-index: 1，
如果加载了大图片：$("#big_image img").attr({src: '/images/audi_big.jpg'});

缓慢加载图像，显示临时图像的最佳方式？也许JQuery？

6 个答案: