Легко использовать большие фоновые изображения на веб-страницах - PullRequest
Новая
       6

Легко использовать большие фоновые изображения на веб-страницах

0 голосов
/ 15 января 2010

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

Они будут размером не более 1920 X 1080, однако сложно сказать, сколько это будет в килобайтах / мегабайтах.

Какие у меня есть варианты и какие наиболее эффективны?

Я не слишком обеспокоен пропускной способностью, просто хочу, чтобы пользователь думал, что все выглядит хорошо;)

1 Ответ

2 голосов
/ 15 января 2010

Один из вариантов - использовать несколько фонов. Имейте маленький фон как нижний слой и покрывайте его большим фоном.

Может быть сложно иметь два фона, если вы хотите, чтобы он был на теле и хотите поддерживать IE. Решение может состоять в том, чтобы начать меньший фон тела, используя JS, чтобы изменить фон низкого разрешения на высокий, после его загрузки: 

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

Имейте в виду, что для такого большого фона требуется больше оперативной памяти, чем в некоторых мобильных браузерах (iPhone до 3GS либо вообще не откажется декодировать такое изображение, либо начнет очищать содержимое кэша / вкладки в панике).

Последняя проблема может быть решена с помощью CSS Media Queries:

http://lofotenmoose.info/css/destroy/media-queries-background-stretch/

За исключением запроса max-device-width вместо (виртуальный / увеличенный) max-width.

...