Javascript 仅在加载时显示动画 gif

Question

我的网站上有一个大约 2MB 的动画 gif 横幅。对于连接速度慢的人，我想包含一些 Javascript，仅在完全加载时显示（并开始播放）此 gif，以便在 gif 仍在加载时网站的其余部分已经显示。理想情况下，我会首先显示一张图像（loading.gif），然后在加载banner.gif时使用javascript切换到横幅（banner.gif）。

我该怎么做？ （我是 JavaScript 新手）

谢谢！

Answer 1

您可以使用 Image 对象来执行此操作，如下所示（当您想要开始加载横幅时执行此操作，可能在 onload 中）：

var banner = new Image();
var loading = new Image();
var bannerElement = document.getElementById("banner"); // assumes an element with id "banner" contains the banner image - you can get the element however you want.
banner.src = "location/of/the/image.gif";
loading.src = "loading.gif";
banner.onload = function() {
     bannerElement.removeChild(bannerElement.lastChild);
     bannerElement.appendChild(banner);
};
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(loading);

您的横幅元素应如下所示：

<div id="banner"><img src="location/of/the/image.gif" alt="Banner" /></div>

这样 1）bannerElement.removeChild 部分将起作用，并且 2）遵循渐进增强的原则，这样没有 JavaScript 的人就不会被排除在外。

Answer 2

像 http://jqueryfordesigners.com/image-loading/ 这样的 jquery 脚本怎么样，

所以你会这样做

<style type="text/css" media="screen">
<!--
    BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
    H1 { margin-bottom: 2px; }

    DIV#loader {
        border: 1px solid #ccc;
        width: 500px;
        height: 500px;
        overflow: hidden;
    }

    DIV#loader.loading {
        background: url(/images/spinner.gif) no-repeat center center;
    }
-->
</style>


$(function () {
    var img = new Image();
    $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('#loader').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', 'myimage.jpg');
});

请注意，如果您已经拥有一组图像元素，则无需创建新的图像元素。如果您已经创建了一个选择器，那么您可以只使用选择器。类似于 $('#myimage').load(... ，它是一个 id 名为 myimage 的图像标签。

Answer 3

我认为你不需要 JavaScript - 你可以使用 css 设置图像区域的背景图像（使用非常小的图像，以便它快速显示），然后在该区域内设置已设置 2mb 图像 src 的图像标签。这样它就应该在准备好时出现。

示例 css:

#banner {background: url('/img/banner-background.jpg');}