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

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

<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="#" onclick="location.href='http://www....html'; return false;" 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 Мб они переключаются быстро, но все же не бесшовные). Как сделать преобразование изображения более бесшовным без снижения качества изображения?  Во-вторых, я понимаю, что я мог бы просто отображать оба изображения в небольшом и крупном масштабе и на мыши над ними переключаться местами; Как мне это сделать?. Это уменьшит отставание?

ОТВЕТЫ

Ответ 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]
}

Ответ 2

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

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

Ответ 3

По состоянию на Javascript 1.6 это может быть выполнено без каких-либо именованных переменных:

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

Ответ 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, но вы можете "предварительно загрузить" этот образ тем не менее.

Ответ 5

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

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

"Правило 1 - Сделать меньше запросов HTTP"

Удачи и получайте удовольствие. - D.

Ответ 6

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

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

Ответ 7

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

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

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

preloadImage('BigImage');

Ответ 8

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

Ответ 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.

Ответ 10

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

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