HTML-карты изображений и предварительная загрузка изображений

Question

Я построил довольно большую карту HTML-изображений старой школы. При наведении указателя мыши на тег области загружается другое изображение, которое заменяет всю карту. Всего 30 изображений при наведении мыши, и чтобы избежать задержки при загрузке, я предварительно загрузил их с помощью jQuery.

Панель Firebug Net показывает, что все изображения загружаются нормально при загрузке страницы (при наведении курсора еще нет). Теперь, когда я наведу курсор мыши на область, firebug показывает, что это изображение запрашивается во второй раз. И это несмотря на то, что я ясно вижу имя файла на несколько строк выше в firebug.

Это нормальное поведение? Кажется, предварительная загрузка работает ... но при наведении курсора мыши все еще отправляется запрос на получение изображения, что приводит к задержке в 1-2 секунды до замены изображения.

Это прямой HTML, без AJAX.

Thx

Answer 1

Видите ли вы задержку 1-2 секунды, когда Firebug не открыт? У меня были похожие проблемы, и я не смог действительно сказать, действительно ли он снова запрашивал изображение. Я не вижу новый запрос при отслеживании моих журналов либо. Кроме того, я никогда не видел такого поведения при просмотре инспектора Safari, поэтому записал его в Firebug.

Answer 2

Можно сделать одну ссылку на изображение на несколько страниц определенного изображения в определенной части.

Это называется отображением изображения в HTML.

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

В приведенном ниже примере, если вы поместите мышь в верхнем левом углу, она будет ссылаться на xyz.com .... и в нижнем правом углу .... она будет ссылаться на abc.com.

<img src="test.jpg" usemap = #example border=0> 
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.example.com"> 
<area shape=Rect Coords=30,30,59,59 Href="http://www.example.com"> 
</map> 

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

Answer 3

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