Загружать только фоновое изображение, когда оно полностью загружено?

ну, название в значительной степени описывает мой вопрос:

как динамически загружать фоновое изображение после его полной загрузки? Иногда я должен использовать фоны, которые настолько велики, что для загрузки браузера может потребоваться некоторое время. Я бы предпочел "загрузить его в фоновом режиме" и позволить ему исчезнуть, когда он будет полностью загружен.

Я думаю, что jQuery лучше всего использовать, но я также хочу, чтобы мой фон появился, если JavaScript был отключен. Если это на самом деле это невозможно, да будет так, но я думаю, что это так?

С наилучшими пожеланиями, Aart

........

EDIT:

Спасибо, ребята! Я был подслушан с этим в течение многих лет и просто не мог придумать хороший и простой способ.

я преобразовал Javascript-решение Джеффри в jQuery, просто потому, что встроенный fade jQuery выглядит так потрясающе.

Я просто опубликую его здесь, Если у кого-то еще есть то же самое выпуск:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#img').css('opacity','0').load(function() {
            $(this).animate({
                opacity: 1
            }, 500);
        });
    });

</script>

<img src='yourimage.jpg' id='img'/>
6
background html javascript jquery

6 ответов

если изображение img элемент:

<img src="bg.jpg" id="img" onload="this.style.opacity='1'" /> <script>document.getElementById("img").style.opacity="0";</script>

это должно нормально загружать изображение, если Javascript отключен, но показывать его только после загрузки, предполагая, что он включен.

одна вещь, чтобы отметить (что я пропустил); некоторые браузеры даже не будут пытаться загрузить изображение, если его display недвижимость none. Вот почему этот метод использует .

6

вы не можете сделать это, когда JS отключен. Однако вы можете установить фоновое изображение в CSS, а затем использовать следующий скрипт (при условии, что элемент имеет ID myelem).

(function() {
    var elm = document.getElementById('myelem'),
        url = 'background image URL here';
    elm.style.backgroundImage = "none";
    var tmp = new Image();
    tmp.onload = function() {
       elm.style.backgroundImage = "url('"+url+"')";
       // or insert some other special effect code here.
    };
    tmp.src = url;
})();

EDIT: хотя, убедитесь, что ваши фоновые изображения являются оптимальными. Если они PNG, попробуйте проиндексировать их с как можно меньшей таблицей цветов или убедитесь, что альфа-канал удален, если нет прозрачности. Если они JPEG, попробуйте настроить сжатие.

3

проверить пример на этой странице: http://www.w3schools.com/jsref/event_img_onload.asp

использование " image.onload " запустит ваш код только тогда, когда изображение будет готово

1

без javascript у вас не может быть событий, поэтому вы не сможете узнать, загружено ли изображение, по крайней мере, для первого рендеринга.

вы также можете использовать предварительную загрузку css (поместите изображение в качестве фона в скрытый div), но это будет работать лучше при первом обновлении, а не при загрузке.

1

вы можете установить переменную к изображению, и когда оно нагружает, установите его к предпосылке тела:

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
1

то, что вы ищете-это метод onload изображения. Если вы установите изображение с дисплеем: нет, оно не будет видно. Чтобы обойти возможное отсутствие javascript, вы делаете следующее:

<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
    document.body.style.backgroundImage = "url(image.png)";
}
</script>

таким образом, если javascript не включен, bg будет загружаться как обычно. Если это так, он будет отображаться в конце

1