Я построил слайдер изображения (на основе потрясающего bxSlider), который будет предварительно загружать изображения точно в срок, прежде чем они будут отображаться. Он работает уже довольно хорошо, но я не думаю, что мое решение действительно HTML.
Моя техника такова: я генерирую разметку ползунка, при этом первый слайд-образ вставляется как обычно (с <img src="foo.jpg">), а последующие образы ссылаются на атрибут данных, например <img data-orig="bar.jpg">. Javascript затем жонглирует при изменении data-orig -> src при необходимости, вызывая предварительную загрузку.
Другими словами, у меня есть:
<div class="slider">
<div><img src="time.jpg" /></div>
<div><img src="data:" data-orig="fastelavn.jpg" /></div>
<div><img src="data:" data-orig="pels_strik.jpg" /></div>
<div><img src="data:" data-orig="fashion.jpg" /></div>
</div>
Чтобы избежать пустых src="" атрибутов (вредных для производительности в некоторых браузерах), я 'вставлен src="data:", чтобы эффективно вставить пустое изображение в качестве заполнителя.
Дело в том, что я не могу найти что-либо в документации для URI данных, указав, является ли это допустимым URI данных или нет. Я в основном хочу, чтобы минимальный URI данных, который разрешает пустое/прозрачное изображение, поэтому браузер может немедленно разрешить src и двигаться дальше (без ошибок или сетевого запроса). Может быть, src="data:image/gif;base64," будет лучше?