0

我有一系列加载到我的 main.php 中的 jquery 幻灯片 (html)。我需要为幻灯片添加一个非常简单的预加载，以防止它开始滑动图像，除非图像完全加载。我应该预加载每张图片还是整个“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>
4

1 回答 1

2

你在这里做的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 );
    });
});
于 2013-01-02T18:11:20.667 回答