Как загрузить картинку с сервера с загрузкой сайта?

Question

[Artem Pavliienko]

Сделал вот такой таб:

При нажатии на таб меняется картинка, но проблема в том что при нажатии идет запрос на сервер, он присылает картинку и она показывается, вот только проходит 1-1,5сек. Как сделать что бы все эти 6 картинок загрузись сразу со страницей?
Вот код:

var tab = $('.tab'), 
        tabContent = $('.tab_content'),
        advantage = $('.advantage'),
        tabImg = $('.slide img'),
        modalImg = $('#modal_img'),
        tabImages = ['./img/tab/tab_img1.jpg', './img/tab/tab_img2.jpg', './img/tab/tab_img3.jpg', './img/tab/tab_img4.jpg', './img/tab/tab_img5.jpg', './img/tab/tab_img6.jpg', './img/tab/tab_img7.jpg'],
        tabImagesMin = ['./img/tab/tab_img1.min.jpg', './img/tab/tab_img2.min.jpg', './img/tab/tab_img3.min.jpg', './img/tab/tab_img4.min.jpg', './img/tab/tab_img5.min.jpg', './img/tab/tab_img6.min.jpg', './img/tab/tab_img7.min.jpg']
       
    hideTabsContent(1);
    
    
    
    function hideTabsContent(t) {
        for (var i = t; i < tabContent.length; i++) {
            tabContent[i].classList.remove('show');
            tabContent[i].classList.add('hide');
            advantage[i].classList.remove('active');
        }
    }
    
    tab.on('click', function(event) {
        var target = event.target;

        for (var i = 0; i < tab.length; i++) {
            if (target === tab[i]) {

                showTabsContent(i);
                break;
            }
        }
    });
    
    function showTabsContent(s) {
        if (tabContent[s].classList.contains('hide')) {
            hideTabsContent(0);
            advantage[s].classList.add('active');
            tabContent[s].classList.remove('hide');
            tabContent[s].classList.add('show');
            tabImg.attr('src', tabImagesMin[s]);
            modalImg.attr('src', tabImages[s]);
        }
    }

Answer 1

[Aleksey Solovyev]

Что-то такое. Потом подставляйте куда надо

function preloader() {
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) {
          imageObj.src=images[i];
     }
}

src - www.techrepublic.com/article/preloading-and-the-ja...

Comments

[Artem Pavliienko]

Спасибо.