Question

我的网站上有一个动画gif横幅，大约2MB。对于连接速度慢的人，我想要包含一些只在完全加载时显示（并开始播放）此gif的Javascript，以便在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(...这样的图像标签，其id为myimage。

Javascript只在加载时显示动画gif

3 个答案: