预加载整个元素

发布于 2024-11-03 08:45:47 字数 140 浏览 2 评论 0原文

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

I have a jCarousel which loads fairly slowly. The images will display as a list first before turning into a carousel view. This also causes the other jquery scripts on the page to be delayed. I have tried preloading the images but it doesn't seem to have any effect on how fast my images turn into a carousel.

Is there any way I can ensure that my entire carousel is preloaded before it is displayed?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

九歌凝 2024-11-10 08:45:47

我使用以下模式:

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

I use the following pattern:

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");
});
怪我太投入 2024-11-10 08:45:47

一种选择是使用 CSS 隐藏轮播的包含 div,然后在轮播脚本运行之前取消隐藏(使用 Javascript)。

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

One option could be to hide the containing div for the carousel using CSS, and then unhide it (using Javascript) just before the carousel script runs.

That way, the images will not be displayed at all until the page is ready and the script is about to execute.

软的没边 2024-11-10 08:45:47

我通常会在以下位置加载幻灯片(html + 图像)之类的内容:

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

这确保了只有在页面的其余部分完全准备好时才加载它(不仅是 DOM,还加载了所有其他图像)。

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

I normally load stuff like slide-shows (html + images) in:

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

That ensures that it only gets loaded when the rest of the page is completely ready (not just the DOM, but all other images are loaded as well).

Additionally you can hide the contents of the carousel and add a .load() event to each image to count how many images are loaded and display the whole thing when they are all ready. I handle that myself, but I don´t know the jCarousel plugin, perhaps it offers that functionality already.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文