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

На веб-сайте, на котором я работаю, есть список ul с отметками 100 (li). Каждый из них ссылается на другой html-сайт. Я бы хотел показать предварительный просмотр изображения, всякий раз, когда вы наводите курсор на одну из ссылок. Изображение должно медленно перемещаться слева.предотвратить предварительную загрузку изображений?

Поскольку каждое изображение предварительного просмотра составляет до 40 КБ, я фактически не хочу предварительно загрузить изображения. Что было бы лучшим способом предотвратить это? Я хотел бы сделать это только через CSS, без JS, если это возможно.

Мои идеи:

а) по умолчанию состояния: <img> -tag с display:none; парения государства: установить его в display:inline. Проблема: transition не работает с display :(

б) просто использовать div вместо этого и написать CSS-правила для каждого li, так что при наведении курсора мыши на соответствующее фоновое изображении с предварительным образом ему присваивается. , Это предотвращает предварительную загрузку изображения?

источник

2012-03-14 BlueHorizon

Нет, вам нужно JS для этого. Загружаются изображения CSS, независимо от «отображения». –

Если ваш CSS знает о пути к изображению, браузер может решить пойти вперед и предварительно загрузить его. Отображение фонового изображения при наведении только кажется, что это предотвратит предварительную загрузку, но только в первый раз, когда оно загрузится; после этого большинство браузеров будут кэшировать его. Имейте в виду, что 'li: hover' не будет работать в IE6, поэтому, надеюсь, вы не будете пытаться включить его в качестве целевого браузера. –

Целесообразно использовать только последние версии IE, Firefox и Chrome. – BlueHorizon

Если вы добавите его в качестве фонового изображения, но только покажите его при наведении, изображение не будет загружаться, пока пользователь не накинет на все, что имеет стиль. Вы должны иметь возможность установить фоновое изображение в строке вместо вывода файла изображения в качестве IMG.

источник

2012-03-14 18:47:34

Благодарим за подтверждение! Я не был уверен в этом. Предварительная загрузка, например, 4 МБ изображений, казалась мне пустой тратой, когда, скорее всего, только 5% будут использоваться регулярно. – BlueHorizon

Вы должны добавить стиль только для зависания, что сделает разметку немного грязной, но это выполнимо. Вы можете легко протестировать его, установив большое изображение в качестве фона на что-то на hover, а затем ожидая его загрузки при наведении на него. –

Вы не можете сделать это только с помощью CSS, потому что ваш браузер загрузит все содержимое (независимо от отображения: нет). Я бы рекомендовал javascript или серверную сторону, как php.

Загрузка Maby jquery может быть чем-то? http://api.jquery.com/load/

источник

2012-03-14 18:48:27 daker

Решение Woudn't Matthew Darnell предотвращает это или все равно будет загружено независимо? – BlueHorizon

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

BlueHorizon: Я не могу утверждать, что 100% не уверены в фоновых изображениях, но я уверен, что он будет загружаться в любом случае. Я сомневаюсь. зависимо от браузера. Мэтью: значит, вы имеете в виду, что когда вы используете спрайты изображений, браузер не загружает весь образ? Это не правда. – daker

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

ответ

Смежные вопросы