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

我正在使用谷歌图表在我的应用程序中显示图表数据。有时谷歌速度很慢，加载图表需要一段时间。这个场景似乎是一个很常见的模式——所以我想知道当图像从谷歌交付时，什么是显示临时图像的好方法。我可以访问jQuery，并且看到了许多“预加载”插件。这是我需要的吗

这个场景/模式的正确术语真的叫做“图像预加载”吗

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

---

谢谢

图像预加载通常是在用户实际请求查看图像之前下载图像时进行的。我相信目前的想法是，除非有很大比例的用户希望查看图像，否则这通常会增加开销。

在加载图像时，您可以显示在中找到的一个奇特的加载GIF。加载图像后，隐藏加载的gif并显示图像本身

---

查看教程。

图像有一个

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;"/>

函数showImage（）{
$（“废话”）.show（）；
$（“#temp”）.hide（）；
}

否您不想预加载（这假设在加载指定图像时暂停页面加载）。您需要显示一个加载图形

$(.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更快地加载图像

你能做的就是加载得慢一点

你似乎认为图像加载是缓慢的，因为你希望它是即时的。很难比立即行动更快

也许你可以试试另一种方法。设计应用程序，以便在用户与某个对象交互时显示图表（单击按钮、链接等），然后在用户要求时加载图表

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

• 不需要该图表的用户不会被其漫长的加载过程所打扰
  • 您知道，在加载图像时，页面布局会发生变化
• 应用程序的初始带宽使用率将降低，这将使其看起来更具响应性
  • 最初加载的图像越少，浏览器准备得越快

想法无耻地从手机版窃取

直观的解决方案加载（非常）大的形象。例如：

缩略图为100 x 75，大图像加载尺寸为960x720

单击缩略图-我们开始加载（'/images/audi_big.jpg'）big image

之后，替换oryginal image

$（“#big_image img”）.attr（{src:'/images/audi_120px.jpg'）我们有缩略图width=“960”
在该层上添加可选层，其中包含信息
加载{CSS}z-index:1
如果加载了big image，则执行该操作：
$（“#big_image img”）.attr（{src:'/images/audi_big.jpg'）

欢迎来到StackOverflow！第一个问题很好。以前在
img
attribute
lowsrc
中，没有代码或插件就可以做到这一点。不幸的是，现代浏览器不支持它。