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

Question

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

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

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

Это все прямой html, не задействованный AJAX.

Thx

Answer 1

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

Answer 2

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

Answer 3

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

Это называется отображением изображения в 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> 

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