javascript - 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

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

示例CSS：

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

Answer 3

像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(...which 是一个带有名为 myimage 的 id 的图像标签。