Question

我有一系列jquery幻灯片（html）加载到我的main.php中。我需要的是为幻灯片添加一个非常简单的预加载，以防止它开始滑动图像，除非图像被完全加载。我应该预加载每个图像还是整个“slideshow.html”？这是slideshow.html的代码：

<body>
 <div id="slideshowContent">
            <img src="images/slideshows/grafica/lisyx_1.png" alt="Lisyx"  class="active"/>
            <img src="images/slideshows/grafica/lisyx_2.png" alt="Lisyx" />
        </div>
</body>

幻灯片的功能：

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshowContent IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshowContent IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshowContent IMG:first');
    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    slideshowInterval = setInterval( "slideSwitch()", 5000 );
});

</script>

Answer 1

您在此处所做的是you are firing slideSwitch()上的doc ready功能

相反，您可以将一个类.preload（它将具有一个ajax加载器图像）添加到正文或任何页面正文元素。

所以你可以试试这个：

$(function() {
    $('body').addClass('preload'); // <---on doc ready preload will be added
    $(window).load(function(){
    $('body').removeClass('preload'); // <---after window fully loaded preload will be removed
       slideshowInterval = setInterval(slideSwitch, 5000 );
    });
});

如何将jquery预加载添加到滑块？

1 个答案: