加载＆＃34;加载＆＃34;首先是厨房的形象

Question

是否可以加载动画加载gif。它需要在图库中的图像之前加载，否则没有用它？

图像将通过css

加载为背景图像

<link rel="stylesheet" href="loading.gif" />

提前致谢

Answer 1

首先应该加载“加载器”图像，当你完成asynchronously loading时，图库图像会用加载的图像替换加载图像。

Answer 2

我不想复制和粘贴代码，而是link this example on CSS tricks。

Answer 3

你只需要隐藏图像并在加载时切换它，在放置微调器的图像后面，将img包装在div中，在div中定义你的微调器。包装器使用css来隐藏图像。然后我们使用img onload事件来触发一个小函数（见下文），该函数在加载时淡化图像。

这是你如何做的

http://jsfiddle.net/4a1wj359/1/

// switches your image in when it loads
var loaded = function(img){
   img.classList.add('loaded');
};

  <div class="img_wrapper">
    <img id="image1" src="http://theselby.com/media/2_28_11_SupremeCoffee7598.jpg" alt="" onload="loaded(this)"/>
 </div>

请参阅所有css的小提琴，注意我使用的是黑盒而不是微调器，你添加微调器图像代替我的黑色背景。我也会在图像缓慢加载后淡入图像，您可以根据需要更改图像。