Как предварительно кэшировать изображения для быстрого просмотра с помощью JavaScript?

Question

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

<img src="pic.jpg" usemap="#picmap" />
<map id="picmap" name="picmap"><area shape="rect" coords ="10,20,30,40"
onMouseOver="mouse_on_write('mouse is on spot')"
onMouseOut="mouse_off('mouse is off spot')"
href="http://www....html" target="_blank" />
</map>
<p id="desc"></p>

Где в шапке я определил эти функции:

 <script type="text/javascript">
 function mouse_off(txt)
    {
    document.getElementById("desc").innerHTML=txt;
    document.p1.src="pic.jpg";
    }
 function mouse_on_write(txt)
    {
    document.getElementById("desc").innerHTML=txt;
    document.p1.src="pic2.jpg";
  </script>

Работает, но медленно. При наведении мышки на второе изображение появляется несколько секунд; Мое временное решение состояло в том, чтобы резко уменьшить размер изображений, потому что они были огромными (на 2,5 МБ они теперь переключаются быстро, но все еще не без шва). Как сделать переключение изображения более плавным без снижения качества изображения? Подумав еще раз, я понимаю, что я мог бы просто отобразить оба изображения в небольшом и большом масштабе, и при наведении мыши они бы поменялись местами; Как бы я это сделал? Это уменьшит отставание?

Answer 1

Вам не нужно создавать какие-либо элементы страницы, все они могут быть предварительно загружены с помощью JavaScript:

tempImg = new Image()
tempImg.src="pic2.jpg"

EDIT:

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

preloads = "red.gif,green.gif,blue.gif".split(",")
var tempImg = []

for(var x=0;x<preloads.length;x++) {
    tempImg[x] = new Image()
    tempImg[x].src = preloads[x]
}

Answer 2

Делать это со спрайтами - хорошее решение, потому что вам не нужно ждать, чтобы загрузить новое изображение. Спрайты работают путем объединения двух изображений в одно и изменения смещения фона при наведении курсора.

Вы можете даже использовать CSS, чтобы получить более быстрые результаты. Вот хороший учебник по этому здесь .

Answer 3

Начиная с Javascript 1.6 это может быть выполнено без именованных переменных:

imageList.forEach( function(path) { new Image().src=path } );

Answer 4

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

a {  
  background-image: url(back.png);  
  background-repeat: no-repeat;  
  background-attachment:fixed;  
  background-position: 0 0;
}

a:hover {
  background-image: url(back.png);  
  background-repeat: no-repeat;  
  background-attachment:fixed;  
  background-position: 0 20px;  
}  

Таким образом, он может работать без JavaScript.

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

Answer 5

Я заметил, что «предварительная загрузка» в .src по сей день не работает согласованно во всех браузерах - IE7 все же не может понять, как кэшировать / использовать предварительно загруженные изображения - вы можете четко видите, что каждый раз, когда вы наводите курсор мыши, появляется запрос к серверу.

Я загружаю все изображения с помощью стандартного размещения HTML и просто включаю и выключаю style.display.

Answer 6

Умное решение от Diodeus. Однако, если нет веской причины НЕ делать этого, вам стоит подумать об использовании спрайтов. Чтобы их настроить, нужно потрудиться, но чистая эффективность действительно того стоит.

Этот подход является правилом номер один в высокопроизводительных веб-сайтах Стива Соудера .

«Правило 1 - меньше запросов HTTP»

Удачи и веселья. - Д.

Answer 7

То, что вы хотите сделать, это предварительно загрузить изображения за кулисами.

Затем, при наведении мыши, браузер уже будет иметь это изображение в своем кэше и переключит его очень быстро.

function preloadImage(imagePath)
{
    var img = document.createElement('IMG');
    img.src = imagePath;        
}

preloadImage('BigImage');

Answer 8

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Когда мы впервые запустили лабораторию, мы выпустили плагин jQuery, который автоматически загружает все изображения, на которые есть ссылки в файлах CSS. Мы обнаружили, что сценарий невероятно полезен при разработке быстрых приложений, где изображения всегда готовы, когда они нам нужны. В этом посте описывается значительное обновление скрипта, которое сделает его еще более простым для интеграции в существующие проекты.

Answer 9

Вот как я это делаю, на чистом JavaScript:

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];

function preload(imgs) {
    var img;
    for (var i = 0, len = imgs.length; i < len; ++i) {
        img = new Image();
        img.src = imgs[i];
    }
}

preload(myImgs);

Тем не менее, предложение ALassek об использовании CSS-спрайтов является превосходным, если у вас есть возможности сделать это. Преимущества спрайтов много: меньше HTTP-запросов, меньший размер загрузки (обычно), работает без включенного JavaScript.

Answer 10

Используйте display: none;, а затем измените Javascript на display: inline, если вы хотите отобразить его. Это дает дополнительное преимущество, заключающееся в том, что вы можете поместить изображение именно там, где вы хотите в исходном коде страницы, вместо того, чтобы добавлять его позже с помощью Javascript.