Загружать только фоновое изображение, когда оно полностью загружено?
ну, название в значительной степени описывает мой вопрос:
как динамически загружать фоновое изображение после его полной загрузки? Иногда я должен использовать фоны, которые настолько велики, что для загрузки браузера может потребоваться некоторое время. Я бы предпочел "загрузить его в фоновом режиме" и позволить ему исчезнуть, когда он будет полностью загружен.
Я думаю, что 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 ответов
если изображение img
элемент:
<img src="bg.jpg" id="img" onload="this.style.opacity='1'" />
<script>document.getElementById("img").style.opacity="0";</script>
это должно нормально загружать изображение, если Javascript отключен, но показывать его только после загрузки, предполагая, что он включен.
одна вещь, чтобы отметить (что я пропустил); некоторые браузеры даже не будут пытаться загрузить изображение, если его display
недвижимость none
. Вот почему этот метод использует .
вы не можете сделать это, когда 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, попробуйте настроить сжатие.
проверить пример на этой странице: http://www.w3schools.com/jsref/event_img_onload.asp
использование " image.onload " запустит ваш код только тогда, когда изображение будет готово
без javascript у вас не может быть событий, поэтому вы не сможете узнать, загружено ли изображение, по крайней мере, для первого рендеринга.
вы также можете использовать предварительную загрузку css (поместите изображение в качестве фона в скрытый div), но это будет работать лучше при первом обновлении, а не при загрузке.
вы можете установить переменную к изображению, и когда оно нагружает, установите его к предпосылке тела:
var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
то, что вы ищете-это метод 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 будет загружаться как обычно. Если это так, он будет отображаться в конце