Javascript для отображения только анимированный GIF при загрузке - PullRequest
Новая
       9

Javascript для отображения только анимированный GIF при загрузке

2 голосов
/ 29 апреля 2011

У меня на сайте есть анимированный GIF-баннер размером около 2 МБ.Для людей с медленным подключением я хочу включить Javascript, который будет отображать (и начинать воспроизведение) этот gif-файл, когда он полностью загружен, так что остальная часть веб-сайта будет отображаться, пока gif все еще загружается.В идеале, я бы сначала отображал одно изображение (loading.gif), а затем переключался на баннер (banner.gif) с помощью javascript при загрузке banner.gif.

Как мне это сделать?(Я новичок в Javascript)

Спасибо!

Ответы [ 3 ]

4 голосов
/ 29 апреля 2011

Вы можете сделать это, используя объект 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 не остались в стороне.

1 голос
/ 29 апреля 2011

Как насчет скрипта jquery, например http://jqueryfordesigners.com/image-loading/

Итак, вы бы сделали 

<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(..., которое является тегом изображения с идентификатором myimage.

1 голос
/ 29 апреля 2011

Я не думаю, что вам нужен JavaScript для этого - вы можете установить фоновое изображение области изображения с помощью css (используйте очень маленькое изображение, чтобы оно появлялось быстро), а затем внутри этой области поместите тег image с помощью src изображения размером 2 МБуже установлено.Таким образом, он должен появиться, когда будет готов.

пример css:

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

...