Question

我正在使用Supersize滑块..

我正面临一个问题...

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

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

任何人都可以帮我解决这类问题吗？

EDIT

我希望在上一张图片完全下载后进行幻灯片转播..

说我有3张照片a.jpg，b.jpg，c.jpg

a.jpg过渡到b.jpg，

b.jpg是一个非常大的文件..直到除非b.jpg完全下载，它不会转变为让位给c.jpg ......

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

Answer 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.
});

你已经完成了。

Answer 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>

完成图像后的滑块转换

2 个答案: