Question

我有一个加载相当慢的jCarousel。在转入轮播视图之前，图像将首先显示为列表。这也会导致页面上的其他jquery脚本被延迟。我已经尝试过预加载图像，但它似乎对我的图像变成旋转木马的速度没有任何影响。
有什么方法可以确保我的整个旋转木马在显示之前预先加载？

Answer 1

我使用以下模式：

var imgCount = $("#carousel img").length;
var loadCounter = 0;

$("#carousel img").one("load", function() {
    loadCounter++;
    if(loadCounter == imgCount) {

        // all images have loaded, fire up carousel
        $("#carousel").carousel();
    }
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

Answer 2

一个选项可能是使用CSS隐藏轮播的包含div，然后在轮播脚本运行之前取消隐藏它（使用Javascript）。

这样，在页面准备好并且脚本即将执行之前，图像将根本不会显示。

Answer 3

我通常在幻灯片放映（html +图片）中加载：

$(window).load(function() {
  // load and start slideshow when rest of page is loaded
});

这确保只有在页面的其余部分完全就绪时才会加载它（不仅仅是DOM，还会加载所有其他图像）。

此外，您可以隐藏轮播的内容并为每个图像添加.load()事件，以计算加载的图像数量，并在它们准备就绪时显示整个图像。我自己处理，但我不知道jCarousel插件，也许它已经提供了这个功能。

预加载整个元素

3 个答案: