Загрузка изображений быстрее (PHP, JQuery)

Question

У меня есть JQuery-код, как это:

var number_images = 5; 
var ct = 1; 

// Goto previous Picture 
$('#changeImageMinus').on('click', function() 
{ 
    if(ct-1>=1 && ct-1<=number_images) 
    { 
     ct = ct - 1; 
     $('.container-bg').css("background-image","url('images/" + ct + ".png')"); 
    } 
}) 

// Goto next Picture 
$('#changeImagePlus').on('click', function() 
{ 
    if(ct+1>=1 && ct+1<=number_images) 
    { 
     ct = ct + 1; 
     $('.container-bg').css("background-image","url('images/" + ct + ".png')"); 
    } 
}) 

У меня есть изображения с именами, как 1.png, 2.png ... в папке images/, поэтому я просто загрузить изображения вперед/назад, нажав кнопку «+» или «-». Проблема в том, что загрузка занимает очень много времени, и мне хотелось бы знать, есть ли способ предварительно загрузить все изображения в буфер или что-то в этом роде. Я в основном хочу загрузить изображения до того, как сайт откроется, чтобы он показывал быстрее, когда я их переключаю. Заранее большое спасибо!

Answer 1

Вы можете сделать это с помощью JS с помощью класса изображений. Создайте новый объект изображения и установите для него свойство src с указанием пути к вашему изображению. Сделайте это для всех изображений перед печатью страницы, и вы должны предварительно загрузить их. В этом article они описывают его (второй путь).

Просто будьте осторожны, потому что, если у вас много фотографий, это может негативно повлиять на работу пользователя, особенно для пользователей с более медленным подключением (да, они существуют, например: D). Представьте, что вам нужно подождать несколько (например, 10 или более) секунд для загрузки страницы. Лучшим способом в таких случаях будет предварительная загрузка указанного количества изображений, а затем загрузка остального, если потребуется. Проблема ожидания может произойти снова, но, по крайней мере, пользователь увидит вашу страницу, а не ищет какой-нибудь другой :)