Question

我需要在从服务器加载图像之前设置微调器。如何在图像加载表单服务器时设置一个小的微调器图像。

就像HTML

一样

<img src="/imge/abc1.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/anyname.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/any.jpg" />
</br>
<p>This tesst text</p>
<img src="/imge/allname.jpg" />
</br>
<p>This tesst text</p>

像图片加载之前的facebook show spinner一样所以我只需要将<img>替换为此处正在加载的图像。所以在这个如何设置小微调器，用户可以意识到图像正在这里加载

Answer 1

如果您想通过CSS只需在<head>代码上编写代码

来执行此操作

<style type="text/css">
img {
    min-width:50px; /* if load.gif have 50px width */
    min-height:50px; /* if load.gif have 50px height */
    background: url('load.gif') no-repeat;
}
</style>

Answer 2

这可能会成功

只需将背景图片添加到img标签。所以CSS就是

img{
      background:url(your laoding image)
}

编辑：或者您可以使用javascript添加图片遵循的步骤 1.首先加载您的默认图像（您的加载图像）
2.加载原始图像，但一定要将其显示属性设置为无 3.然后在一段时间后将此显示属性更改为阻止（并确保删除默认图像）

Answer 3

使用FontAwsone Spinner：http://fontawesome.io/icon/spinner/

使用 fa-spin 类可以旋转任何图标。适用于fa-spinner，fa-refresh和fa-cog。

<i id="spin" class="fa fa-spinner fa-spin"></i>

然后在ajax中使用 beforeSend：并使用 setTimeout 来显示图片显示前的加载微调器， 示例：

setTimeout(function(){
            $('#spin').show(); //spin is the id of the spinner in <i> tag
            },2000); // 2000ms: spinner appear for 2 seconds before the image appear

然后使用成功：来显示图片

如何在从服务器加载图像时设置预加载图像

3 个答案: