完成图像后的滑块过渡答案

【问题标题】：Slider transition after Complete Image完成图像后的滑块过渡
【发布时间】：2013-02-23 08:09:13
【问题描述】：

我正在使用超大滑块..

我遇到了问题……

如果图像尺寸较大且加载需要时间，则在完全加载之前，滑块会切换到新图像..

我想添加一个功能，例如当一个图像完全下载后，滑块将移动..

有人可以帮我解决这类问题吗？

EDIT

我想在上一张图片完全下载后进行幻灯片传输..

假设我有 3 张图片 a.jpg、b.jpg、c.jpg

a.jpg 转换为 b.jpg，

b.jpg 是一个非常大的文件.. 除非 b.jpg 完全下载，否则它不会被转换为 c.jpg ......

所以转换可能会根据每个图像停止，直到图像完全下载......

【问题讨论】：

创建图像预加载器？
你想通过创建图像预加载器来做什么？？

标签： jquery slider supersized

【解决方案1】：

在document 完全加载后初始化滑块。

$(window).load(function(){
   //slider initialization.
});

现在在 html 中，如下所示。

<div id="slider">
    <ul>
        <li><img src="loading.jpg" alt="" id="slider_loading"/></li>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="2.jpg" alt="" /></li>
        <li><img src="3.jpg" alt="" /></li>
    </ul>
</div>

现在为 slider div 在女巫内添加 css 为所有图像添加 dislpay:none; 规则。

CSS

#slider ul li img
{
    display:none;
}

#slider_loading
{
    display:block !important;
}

现在在slider initialization 代码之前删除加载图像，如下所示。

$(window).load(function()
{
    $("#slider_loading").remove();
   //slider initialization.
});

你就完成了。

【讨论】：

@sazet_rey 我只是给了你存档你想要的东西的方法......它可以应用于你正在使用的任何滑块......
好的哥们，但是超大的滑块有一些特定的功能，这就是我想知道的原因，而且它有一个自动转换持续时间。还会考虑吗？？？
@sazet_rey 当您使用 window.load 时，这意味着页面已完全加载，包括所有图像，因此您无需担心过渡持续时间...因为一旦加载图像，滑块就会被激活或创建...您也可以使用 Stuart 回答功能...
好的，我在 jquery 方面有点弱。但你能告诉我一件事吗？ window.load 和 $(document).ready() 有区别吗？？？
@sazet_rey 是的，正如我告诉过你的那样，document.ready 在准备好文档时触发意味着 html 已加载，但 window.load 在页面内容完全加载时触发...

【解决方案2】：

您想要预加载图片。

此函数将加载图像并将它们附加到容器中：

function preloadImages() {
    for(var i = 0; i < arguments.length; i++) {
        $('<img />').attr('src', arguments[i]).appendTo('#myImages');
    }
}

在文档就绪时调用该函数：

$(function() {
    preloadImages('a.jpg', 'b.jpg');
    $('#myImages').show();
});

在你的 HTML 中有：

<div id="myImages" style="display:none"></div>

【讨论】：