Question

我一直在制作一种用于学习资料，图片等的幻灯片。

我的一位同事提到了一些困扰我的东西。由于在一次幻灯片放映中可能会发生超过50个图像，因此在页面完成加载并启动滑块动画之前需要一些时间。我一直在想是否有办法只装载下5到10张幻灯片，而不是一次加载所有幻灯片？

也许你们其中一个人知道解决这个问题的正确方法吗？

这里的HTML代码：

<div id="galleria1" class="JSLgallery" width="640" height="450" data-interval="1000" data-fadeTime="0" data-animation="fade">
        <div class="JSLmask">
            <a href="#" class="show" >
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie2.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie3.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie4.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie5.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie6.jpg" />
            </a>
        </div>
    </div>

提前致谢，

马里奥

Answer 1

您可以使用多种技术延迟加载图像，其中一种技术如下：

a）在除src之外的其他属性中定义图片网址（例如isrc），除了第一个以外的所有图片。

<img width="640" height="450" alt="" rel="Slider-Image" isrc="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" />

b）在您的页面启动代码和每个“移动到下一个幻灯片”事件中，您可以致电：

function loadMoreImages() {
    var limit = 5;
    var i = 0;
    $('img[isrc]').each(function() {
        if(i < limit) {
            $(this).attr('src', $(this).attr('isrc'));
            $(this).removeAttr('isrc'));
        }
        i++;
    });
}

$(document).ready(function() { 
    loadMoreImage(); 
    $('#yournextbutton').click(function() { loadMoreImage(); });
});

JQuery - 幻灯片，图库：连续加载图片（下五个），而不是一次性加载

1 个答案: