Лучшее решение здесь - попытаться найти способ уменьшить это изображение.Есть несколько хороших инструментов сжатия.Я рекомендую взглянуть на ImageMagick, некоторые специфичные для JPEG инструменты (http://jpegclub.org/) или PNG-специфичные инструменты (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).
). Но чтобы делать то, что вы конкретно просите - скрывайте все на странице, покаготов и затем загрузите его - вы можете использовать jQuery и сделать что-то вроде этого:
$(function(){
var bgimage = new Image();
bgimage.src="{your giant image's URL goes here}";
$(bgimage).load(function(){
$("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();
});
});
Что он делает, это ждет, пока все элементы загрузятся на странице, а затем создаст новый объект Image.Мы указываем источник на ваш файл изображения большего размера. Когда он завершит загрузку, мы изменим фон, чтобы использовать это вновь загруженное изображение, которое должно загружаться немедленно, потому что браузер кэшировал его.
У меня там fadeIn ()Если вы хотите скрыть весь контент на странице, пока он не будет готов. Это означает, что вы должны сделать скрытый.
По какой-то причине fadeIn () работает лучше, чем show () или просто удаляя «скрытый» классс помощью removeClass (), если вы выберете такой подход. При последних двух подходах тег, кажется, изменяет свою высоту, чтобы соответствовать содержимому страницы, котораярезультат в том, что фоновое изображение не отображается полностью.
Честно говоря, я не очень рекомендую такой подход: p
По крайней мере, если вы не собираетесь скрывать всесодержимое на странице, пока оно не будет готово.
Это может быть хорошим подходом для отображения фонового изображения, только когда оно готово, избегая отображения частично загруженного изображения ...
Более медленная загрузкапросто компромисс для использования больших изображений.