预加载整个元素
我有一个 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我使用以下模式:
I use the following pattern:
一种选择是使用 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.
我通常会在以下位置加载幻灯片(html + 图像)之类的内容:
这确保了只有在页面的其余部分完全准备好时才加载它(不仅是 DOM,还加载了所有其他图像)。
此外,您可以隐藏轮播的内容并向每个图像添加
.load()
事件来计算加载的图像数量,并在图像全部准备好时显示整个内容。我自己处理这个问题,但我不知道 jCarousel 插件,也许它已经提供了该功能。I normally load stuff like slide-shows (html + images) in:
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.