Фоновое изображение загружается медленно - PullRequest
3 голосов
/ 13 августа 2011

У меня есть сайт, использующий фоновое изображение, размер которого изменяется до размера окна.Это достигается размещением <img> в теле и некоторых пользовательских CSS ( Technique # 2 ).

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

<?php if (is_single(array(11,24,26,28,30,36))) : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg" class="bg" />
<?php else : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg" class="bg" />
<?php endif; ?>

Моя проблема в том, что изображение перезагружается каждый раз, когда я обновляю или перемещаюсь куда-то еще.Это приводит к вспышке белого цвета.Смотрите веб-сайт здесь!

Я считаю, что php-скрипт вызывает изображение каждый раз, что приводит к 'flash'.

Есть ли способ обойти это?Способы сделать кеш изображений и не перезагружать каждый раз?

РЕДАКТИРОВАТЬ

Я считаю, что проблема является проблемой FOUC.При обновлении будет мигать цвет фона (по умолчанию белый), вызывая вспышки.Исправления FOUC, похоже, не помогают.

Проблема возникает даже после удаления условного оператора PHP.Проблема возникает, когда <img> изменяется на background-image.

Ответы [ 4 ]

1 голос
/ 15 августа 2011

Я заметил этот вопрос некоторое время назад, но надеялся, что вы получите ответ, который подойдет вам.

Поскольку пока у вас ничего не работает, у меня есть один совет: когда вы сохраняете файлы .jpg (большие фоновые изображения), вы можете сохранить их в "прогрессивном" формате, если это возможно.

http://en.wikipedia.org/wiki/JPEG

Существует также чересстрочный формат "Progressive JPEG", в котором данные сжимается в несколько проходов с прогрессивно более высокой детализацией. это идеально подходит для больших изображений, которые будут отображаться при загрузке через медленное соединение, позволяя разумный предварительный просмотр после получения только часть данных. Тем не менее, прогрессивные JPEG не так широко поддерживается, и даже некоторые программы, которые их поддерживают (например, как некоторые версии Internet Explorer) отображает изображение только один раз был полностью загружен.

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

Кроме того, убедитесь, что вы предоставили цвет фона, который не будет сильно контрастировать с изображением, и попытайтесь сжать размер файла настолько, насколько выдержит ваш дизайн.

1 голос
/ 15 августа 2011

Я проверил ваш сайт и обнаружил, что все работает как положено.Когда браузер запрашивает страницу с пустым кешем, загрузка изображения займет несколько секунд.Когда вы переходите на любую другую страницу веб-сайта, браузер извлекает изображение из кэша - я не вижу вспышки на FF4 и не вижу браузер, запрашивающий изображение stylingbg / weddingsbg более одного раза за сеанс.

Если вы заметили, что изображение загружается каждый раз, когда вы посещаете страницу, то, возможно, кеш вашего браузера отключен (или неправильно настроен).Сервер не отправляет заголовок Expires;явное указание заголовка expires может помочь в некоторых случаях.

Также обратите внимание, что некоторые браузеры запрашивают все ресурсы с нуля , когда вы нажимаете обновление.Современные браузеры (я проверял на FF4) будут отправлять заголовок If-Modified-Since, разумный сервер будет возвращать только ответ Не изменен , следовательно, не мерцает.

Кроме того, я предлагаю вамдобавьте цвет фона CSS на свою страницу, который соответствует тону фонового изображения.Это помогает в ситуациях, когда изображения отключены или долго загружаются.Также рассмотрите предложение @ Wesley об использовании прогрессивных изображений.Ваше текущее изображение загружается сверху вниз.Вы можете улучшить взаимодействие с пользователем, преобразовав изображение в прогрессивный JPEG.

0 голосов
/ 17 августа 2011

Я обнаружил источник проблемы, и я ценю предыдущие комментарии, так как они очень помогли!

Проблема в Wordpress 3.2 и конфликтах с jQuery.Эти конфликты приводят к возвращению страшного FOUC в браузерах webkit и иногда в IE.

Идеального решения не существует, но все три из перечисленных ниже очень помогли:

1.) Размещение пустого вызова скрипта непосредственно перед вызовом javascript помогает «запустить» таблицу стилей, значительно сокращаетдлительность белой вспышки FOUC.

<script type=”text/javascript”></script>

2.) Понижение до jQuery 1.4.4.Найдено здесь .Очевидно, проблема заключается в конфликте новых версий jQuery и WP 3.2.Чтобы сделать это, не затрагивая функции администратора, добавьте в файл functions.php вашей темы следующее:

    // Downgrade to jQuery 1.4.4 in order to support jQuery Tools
    function downgrade_jquery() {
    global $wp_scripts;

    // We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
    if ( !is_admin() ) :
            wp_deregister_script('jquery');
            wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
    endif;
    }
    add_action( 'wp_head', downgrade_jquery() );

3.) Использование аналогичного цвета фона для соответствия изображению, как рекомендовано выше:Уэсли Марч и Салман А. Я еще не пробовал прогрессивный формат JPEG, но думаю, это тоже поможет.

Комбинация, по-видимому, почти устраняет FOUC для Wordpress 3.2 и обеспечивает решение, по крайней мере, до тех пор, пока разработчики не устранят проблему в будущих версиях.

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

0 голосов
/ 13 августа 2011

Вместо этого используйте CSS.

<style>
body.weddings {
    background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg');
}

body.styling {
    background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg');
}
</style>

Затем в PHP:

<?php if (is_single(array(11,24,26,28,30,36))) : ?>
<body class="weddings">
<?php else : ?>
<body class="styling">
<?php endif; ?>
...