预加载整个元素

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

来源

2011-04-27 LostLin

我用下面的模式：

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"); 
});

来源

2011-04-27 14:32:16 karim79

是否可以，我有'$（“＃carousel .classname”）'它的工作原理是什么？ – LostLin 2011-04-27 14:46:42

@Ima Student - yes，我使用的选择器仅仅是一个例子 – karim79 2011-04-27 15:41:01

我通常加载像幻灯片显示（HTML +图像）的东西：

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

这保证了当页面的其余部分是完全准备好了（不只是DOM它只被加载，但所有其他图像也加载）。

此外，您可以隐藏传送带的内容并为每个图像添加事件以计算加载了多少图像并在完成所有事情时显示整个事件。我自己处理，但我不知道jCarousel插件，它可能已经提供了这种功能。

来源

2011-04-27 14:31:23 jeroen

但那就是我有preloader =（ – LostLin 2011-04-27 14:39:08

@Ima学生所以我有;我首先在'$（window）.load'中动态添加html，然后将'.load（）'事件附加到新添加的图像，类似于@ karim79的代码 – jeroen 2011-04-27 14:43:13

一种选择可能是隐藏使用CSS转盘包含div，然后取消隐藏它（使用Javascript）的旋转木马脚本运行之前。

这样，直到页面准备就绪并且脚本即将执行，图像才会全部显示。

来源

2011-04-27 14:32:57

yea我想这样做，但它看起来并不是最有效的方式。 – LostLin 2011-04-27 14:35:01

如果您不先隐藏图像，它们将显示在页面上。如果页面需要一段时间加载，则用户将在JavaScript开始之前看到图像。没有任何办法可以解决它 - 你可以改变如何在没有Javascript的情况下显示图像，在JS开始之前让它们看起来更好，或者你隐藏了图像。 – 2011-04-27 14:36:58

我其实认为图像加载正常。只是将它们延迟显示为轮播 – LostLin 2011-04-27 14:40:05

预加载整个元素

回答

相关问题