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

Question

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

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

Мои идеи:

a) default-state: <img> -tag с display:none; hover-state:установите его на display:inline.Проблема: transition не работает с display: (.

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

Answer 1

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

Answer 2

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

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