Question

对于我的一个客户手册网站，我使用的是Bootstrap carousel。旋转木马有6个面板，每个面板都显示相当大的图像。

为了加快初始加载时间，我只想在页面的源代码中包含两个面板，并且在页面加载到DOM之后以某种方式使用JavaScript附加其他面板。也就是说，我想 lazy load 转盘的其他面板;希望它们在旋转木马需要显示它们之前就已到位（我的旋转木马设置为每隔4秒更换一次面板，所以两个初始面板给我8秒钟来附加第三个面板）。

如何将面板添加到现有的轮播？

HTML：

<div id="home_pictures" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="img/carousel_wellness.jpg" alt="Wellness: Comprehensive approaches for your individual needs" />
            <div class="container">
                <div class="carousel-caption">
                    <h2>Wellness</h2>
                    <p class="lead">Comprehensive approaches for your individual needs</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/carousel_psychotherapy.jpg" alt="Psychotherapy: Increase your sense of your own well-being" />
            <div class="container">
                <div class="carousel-caption">
                    <h2>Psychotherapy</h2>
                    <p class="lead">Increase your sense of your own well-being</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#home_pictures" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#home_pictures" data-slide="next">&rsaquo;</a>
</div>

Answer 1

这个JavaScript使用JSON进行轻量级对象定义，jQuery附加面板，似乎可以很好地解决这个问题：

$(document).ready(function() {
    if( $html_js.find('#home_pictures').length ) {
        var $carousel_inner=$('div.carousel-inner'),
            carousel_panels = [{
                "title"   : "Massage",
                "img_src" : "carousel_massage.jpg", 
                "description": "Promote healing, relaxation and well-being"
            },
            {
                "title"   : "Nutritional Therapy",
                "img_src" : "carousel_nutrition.jpg", 
                "description": "Change behaviors, eat well, feel well"
            },
            {
                "title"   : "Reiki",
                "img_src" : "carousel_reiki.jpg", 
                "description": "Facilitate self-healing and equilibrium"
            },
            {
                "title"   : "Chiropractic Treatment",
                "img_src" : "carousel_chiropractic.jpg", 
                "description": "Adjustments to realign pain away"
            }];

        for(var i = 0; i < carousel_panels.length; i++) {
            var panel = carousel_panels[i];
            $carousel_inner.append( '<div class="item"><img src="img/'+panel.img_src+'" alt="'+panel.title+': '+panel.description+'" /><div class="container"><div class="carousel-caption"><h2>'+panel.title+'</h2><p class="lead">'+panel.description+'</p></div></div></div>' );
        }
    };

});

完成的结果可在http://fallschurchwellness.com/

获得

此解决方案适用于“JavaScript loop through json array?”

的答案

如何将面板添加到现有的轮播？

1 个答案: