加载"加载"先给厨房拍照

Load a "Loading" image for galley first

本文关键字：加载 quot 厨房      更新时间：2023-09-26

是否可以加载动画加载gif ?它需要在图库中的图像之前加载，或者没有使用它?

该图像将通过css

作为背景图像加载
<link rel="stylesheet" href="loading.gif" />

Thanks in advance

您应该首先加载"loader"图像，当您完成异步加载图库图像时，将加载图像替换为已加载的图像

与其复制粘贴代码，我更愿意将这个示例链接到CSS技巧上。

你只需要隐藏图像并在加载时切换它，在图像后面放置旋转器，要做到这一点，你将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，注意我使用一个黑色的盒子，而不是一个旋转器，你添加你的旋转器图像在我的黑色背景的地方。我还会在加载缓慢后淡出图像，您可以根据自己的意愿进行更改

相关文章：