1

我正在使用超大滑块..

我面临一个问题...

如果图像尺寸很大并且加载需要时间，那么在完全加载之前，滑块会被更改为新图像..

我想添加一个功能，比如当一个图像完全下载时，然后滑块将传输..

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

EDIT

当上一张图片完全下载时，我想要幻灯片中转。

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

a.jpg 转换为 b.jpg，

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

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

4

2 回答 2

0

您想预加载图像。

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

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>
于 2013-02-23T08:41:20.143 回答
0

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现在为内部女巫制作 cssdislpay:none;为所有图像添加规则。

CSS

#slider ul li img
{
    display:none;
}

#slider_loading
{
    display:block !important;
}

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

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

你就完成了。

于 2013-02-23T08:22:30.063 回答