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

Question

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

Для достижения этой цели, я поместил следующий скрипт внутри тега:

<script> 

if (document.images) { 
var my_image_one = new Image(); 
my_image_one.src= "path/to/images/my-image-one.jpg"; 
var my_image_two = new Image(); 
my_image_two.src= "path/to/images/my-image-two.jpg"; 
var my_image_three = new Image(); 
my_image_three.src= "path/to/images/my-image-three.jpg"; 

/* etc. */ 

</script> 

Проблемы я вижу со сценарием:

1. Это повторяется.
2. Он запускается и поэтому пытается загрузить изображения каждый раз, когда загружается любая новая страница (даже если изображения уже были загружены ).

Я хочу, чтобы улучшить его, создавая что-то вроде этого:

if (document.images) { 
my_images = array (image_name=>path/to/image/image-name.jpg, et cetera); 
for (i=1;i++;i<=array.length) { 
if "the image hasn't been preloaded yet" { 
preload image; 
} 
} 

Как это может быть переведено в соответствующую JavaScript?

Answer 1

Вы можете создать массив строк, как это:

var paths = [ "first/path", "second/path", "third/path" ]; 

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

Если вы выполняете эту работу в точке вашей страницы, так что document.images уже установлен, тогда нет смысла делать это вообще, если ваш список изображений не является исчерпывающим для многостраничного сайта. Для одной страницы браузер будет разбирать DOM и видеть все ваши теги <img> к тому времени, и поэтому он уже будет загружать изображения. Предварительная загрузка изображений только для вашей страницы, вероятно, не стоит вообще. Это полезно сделать с вводной страницы «Добро пожаловать» на большом многостраничном сайте, чтобы последующие страницы отображались быстро.