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();

在jQuery中远程加载和旋转图像

1 个答案: