원격으로 jQuery에서 이미지로드 및 회전

Question

이미지를 회전시키는 많은 갤러리 플러그인이 있지만 페이지에 이미지 목록을 사용하는 것처럼 보이기 때문에 처음에는 모두 다운로드해야합니다. 이 문제가 페이지 상단에서 발생하면 이미지가 크거나 많은 이미지가있는 경우로드 시간이 많이 느려질 수 있습니다.

이미지를 회전 할 때 이미지가로드되는 대신 링크 목록을 기반으로 이미지를 회전하려고합니다. 나는 행운이없는 구글을 수색했다 - 누군가는이 같은 것을 발견하거나 가지고있다?

Answer 1

이러한 모든 종류의 스크립트는 페이지에로드 된 이미지를 사용합니다. 사용자가 다운로드 할 때까지 이미지가 회전해야하는 빈 공간이 생깁니다.

페이지의 맨 끝에 숨겨진 컨테이너 및/또는 너비와 높이가 1 픽셀 인 이미지를 항상 둘 수 있습니다. 사용자는 페이지 맨 마지막에 있기 때문에 이러한 이미지를 다운로드하는 데 지체하지 않아야합니다. 단, 페이지로드시 스크립트가 실행되는 경우 이미지가 다운로드 될 때까지 지연됩니다.

이 작업을 진행하고 싶지만 사용자 정의 플러그인을 찾을 수없는 경우 jQuery를 한 줄만 입력하면 몇 줄의 JavaScript에서이 작업을 수행 할 수 있습니다. 이것은 아마도 유효한 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();