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

Question

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

Я хочу повернуть изображения на основе списка ссылок вместо того, где изображение загружается так, как оно требуется при вращении? Я безуспешно искал в Google - кто-нибудь нашел или что-то подобное?

Answer 1

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

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

Если вы действительно хотите пойти дальше и не можете найти собственный плагин, вы можете сделать это в нескольких строках JavaScript - только с одной строкой jQuery. Это, вероятно, не будет действительным JavaSscript, поэтому может потребоваться немного уговорить, чтобы заставить его работать; это больше показывает вам теорию.

var numberOfImages = 3;
var lastImageIndex = -1;
Array imageUrls[numberOfImages];
imageUrls[0] = 'http://www.mysite.com/image1.jpg';
imageUrls[1] = 'http://www.mysite.com/image2.jpg';
imageUrls[2] = 'http://www.mysite.com/image3.jpg';

function rotateImage()
{
    // Variable for our current number
    lastImageIndex++;

    // Roll round
    if (lastImageIndex > numberOfImages)
    {
        lastImageIndex = 0;
    }

    // Update our image's src tag (requires an id="imageTag" attribute on the <img> tag)
    $('#imageTag').attr('src', imageUrls[imageNumber]);
}

// Rotate every 2 seconds
window.setInterval(rotateImage, 2000);

// Set initial image now
rotateImage();