Предварительная загрузка изображения из аттрибута

@Extalionez · Регистрация: 11.12.2012

Студворк — интернет-сервис помощи студентам

Делаю простейшую задачу. Надо с помощью jQuery(обязательно именно скриптом, а не css) менять src у img при наведении на него. Но блин, при наведении на фото, другое фото подгружается медленно. Как быть? Можно ли заставить браузер загрузить это фото сразу?

@Web-ulyanov · 26.01.2014, 11:50

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
 
        $('img[src*=small]').hover(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'small'));
            }
        );
 
      });

HTML5
1
2
3
<div>
      <img src="myImg.small.jpg" alt="#">
</div>

Src будет меняться при наведении с myImg.small.jpg на myImg.medium.jpg и понятное дело тут же изменяться изображение

@Web_Master · 26.01.2014, 13:01

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

Extalionez, копайте в эту сторону:

JavaScript
1
2
3
4
// Код который предварительно загружает изображение
$(new Image()).attr('src', 'image.jpg').load(function() {
  // Код который срабатывает только после загрузки изображения
});

@vovandr · 26.01.2014, 13:49

Для предзагрузки изображений можно воспользоваться такой функцией:

JavaScript
1
2
3
4
5
6
7
8
9
10
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
 
preload([
    'img/small.jpg',
    'img/medium.jpg'
]);

Можно даже оформить в виде плагина:

JavaScript
1
2
3
4
5
6
7
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
 
$(['img1.jpg','img2.jpg','img3.jpg']).preload(); // так используем

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

@Extalionez 1 / 1 / 1 Регистрация: 11.12.2012 Сообщений: 149

	Предварительная загрузка изображения из аттрибута 26.01.2014, 09:19. Показов 1743. Ответов 3 Метки нет (Все метки) Делаю простейшую задачу. Надо с помощью jQuery(обязательно именно скриптом, а не css) менять src у img при наведении на него. Но блин, при наведении на фото, другое фото подгружается медленно. Как быть? Можно ли заставить браузер загрузить это фото сразу? 0