加载图像时显示文本答案

【问题标题】：Show text while loading images加载图像时显示文本
【发布时间】：2013-02-12 10:24:37
【问题描述】：

我正在制作一个带有完整背景滑块的网站，所以图片有点大。我想要一个脚本，在加载背景图像时显示一些带有动画效果的文本。我已经搜索过这个，但没有成功。有人可以进一步帮助我吗？

谢谢！

【问题讨论】：

How to show a spinner while loading an image via JavaScript 的可能重复项
是否可以加载 .gif preloaders.net？
不是真的，我想要一个带有文本动画的第一个屏幕，有一些延迟来显示徽标 + 网站名称 + 可能是一个 gif 来查看图像正在加载。

标签： jquery

【解决方案1】：

默认显示文本，在$(img).load() 上删除它。使用.animate() 为文本添加动画效果。如果更换图片，请再次插入spanLoading，然后重复这些步骤。

<div>
    <img src="book.png" alt="Book" id="book" />
    <span id="spanLoading">Loading...</span>
</div>


<script type="text/javascript">
    $(function(){
        //animate loading text
        $("#spanLoading").animate({left: '+=50'},500); 

        //On img loaded, remove loading text
        $("#book").load(){
            $("#spanLoading").remove();
        }
    });
</script>

【讨论】：

【解决方案2】：

我认为您必须使用该功能动态加载背景图像

 $(function()){
   $("#background").attr('src','your_image here');
 }

并在您的 hTML 代码中将动画图像设置为默认背景

那么你就会有你的效果。

【讨论】：