Question

预载可能不是正确的术语......

我有一个加载非常大图像的页面。我想等待大图像完全加载，然后才能在用户的页面上显示。

目前，我有一个加载gif，我正在使用javascript等待图像加载，然后用图像替换加载gif src：

<img src="loading.gif" id="image" />
<script>
img = 'very_large_image.jpg';
var newimg = new Image();
newimg.src = img;
newimg.onload = function(){
$('#image').attr('src',img);
}
</script>

我想知道是否有更快的方法来加载此图像，例如纯CSS方式或某种方式强制浏览器首先下载此资产。上面的代码显然位于图像预期加载的位置。所以上面和下面都有代码。

我认为一个CSS选项是将图像放在屏幕上，一旦加载，执行src替换。

我的服务器正在运行http2，因此它应该非常快。我只是想知道是否有更好的方法，然后我现在正在做的是确保以最快的方式为所有主流浏览器加载大图像。

我应该补充一点，我已经对图像文件进行了大量优化。我正在使用高分辨率摄影。

谢谢！

Answer 1

你可以让JPG渐进，然后让它加载。浏览器将逐渐显示图像，然后加载更多细节。

这是最好的方法，因为用户甚至可以在完全加载之前看到图像。

编辑：在Linux上使用jpegtran，在Windows上使用Photoshop或RIOT

Answer 2

你做得很好！

以下是我提出的建议：

https://jsfiddle.net/Vandeplas/jkwweh52/

HTML：

<img src="http://loadinggif.com/images/image-selection/32.gif" large-src="http://www.planwallpaper.com/static/images/518079-background-hd.jpg" large-class="fancyImg">

JS：

$('img[large-src]').each(function() {
  var img = $(this);
  var newimg = new Image();
  newimg.src = img.attr('large-src');
  newimg.setAttribute('class', img.attr('large-class'));
  newimg.onload = function() {
   img.replaceWith(newimg);
  };
});

将JS与HTML +分开，您可以轻松添加无限更多预加载图像，而无需更改js！

Answer 3

非常简单的预加载以后需要的图像的方法

print pd.merge(candidates, p, on=['seriesuid'])    
                                           seriesuid  coordX  coordY  coordZ  \
0  9.3.6.1.4.1.14519.5.2.1.6279.6001.100225287222...  -56.08  -67.85 -311.92   
1  9.3.6.1.4.1.14519.5.2.1.6279.6001.100225287222...  -56.08  -67.85 -311.92   

   class                                              paths  
0      0  /home/msmith/luna16/subset4/9.3.6.1.4.1.14519....  
1      0  /home/msmith/luna16/subset4/9.3.6.1.4.1.14519....

Answer 4

我认为针对您的问题的最佳解决方案是拆分此图像并同时加载部件assync

预加载/加载大图像的最快方法

4 个答案: