JQuery -幻灯片，图库:顺序加载图片(接下来的五张)，而不是一次全部加载

JQuery - Slideshow, Gallery: Sequently load pictures (next five), instead of all at once

本文关键字：加载 五张 全部 一次 接下来 图库 幻灯片 顺序 JQuery      更新时间：2023-09-26

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

我的一个同事提到了一件让我有点困扰的事情。因为在一个幻灯片中可能有超过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>

提前感谢，

马里奥

您可以使用许多技术来延迟加载图像，其中之一是:

a)在src(例如isrc)以外的属性中定义您的图像url，对于除第一个图像之外的所有图像。

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

b)在你的页面启动代码和每个'move-to-next-slide'事件中，你可以调用:

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(); });
});
相关文章：