Question

我正在建立一个建筑师网站，它展示了建筑师的项目。每个项目有8-12张图片，高分辨率，项目数量为12.我想在滑块上显示每个项目的图片。每个项目占用100％的页面，因此页面被分成几个部分（行），每个部分都是一个带有包含图片的滑块的项目。

对于我使用iosSlider插件的滑块，以及我使用fullPage插件的部分。您可以在以下地址看到该网站：http://boazkerengil.com/projects

这是HTML

<div class="row photos section" id="lh">
        <div class="keys">
            <div class="next"><div class="rightKey"></div></div>
            <div class="prev"><div class="leftKey"></div></div> 
        </div>
        <div class = 'iosSlider lh'>
            <div class = 'slider lh-s'> 
                <div class = 'item' id = 'item1'> <!--FIRST PICTURE-->                              
                </div>              
            </div>
        </div>
    </div>

这是CSS

        .iosSlider {
            position:absolute;
            top:0;
            width: 100%;
            height: 100%;
        }

        .iosSlider .slider {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .iosSlider .slider .item {
            position: relative;
            top: 0;
            z-index:0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            margin: 0 0 0 0;
        }

        .iosSlider .slider #item1 {
            background: url('../img/projects/mobile/LH/1.jpg') no-repeat center center;
            background-size: cover;
        }

现在因为这个页面会包含很多图片，所以在移动设备上加载真的很慢。所以我所做的是在JS中使用FOR循环仅在用户单击该部分时附加图片，然后for循环将JS应用于该部分以使其成为滑块。

                $('#lh').find('.keys').bind('mouseover', function() {
                        for(var i = 1; i < 11; i++) {                       
                            $('.lh-s').append("<div class = 'item' id = 'item" + (i+1) + "'></div>");
                        } 

                        $('.lh').each(function(a) {
                            $(this).iosSlider({
                //PLUGIN STUFF
                            });
                        }); 
                    });

我的问题是：哪种方式浏览速度更快？就像我现在一样 - 用.append加载div并给它们带外部css的图片，然后为每个项目加载一个插件（如果用户点击它们，最后总共12个插件）

或者在文档就绪时为所有项目（DRYier）加载一次插件，并将所有div已经放在HTML中而没有任何css。当用户单击一个部分时，for循环将使用jQuery中的.css事件加载css

我个人认为第一种选择更好。它加载页面＆＃34;裸体＆＃34;更快 - 没有任何JS和没有任何图片，除了每个项目中的第一个。

除了JS之外，第二个选项会使HTML文件中的div加载，这会使加载速度变慢。

您怎么看？

谢谢，波阿斯。

Answer 1

您可以使用近两张幻灯片的'.load（）'内容。我的意思是如果你有活动幻灯片nr 3然后你从slide2和slide4加载内容。

这将是你写的之间的事情。

Answer 2

HTML结构不会在加载网站时造成任何延迟。

问题始终存在于大型外部文件上，主要是图像上。

为了避免图像问题，我建议您使用fullpage.js中的回调，例如onLeave或afterLoad。

我个人会使用onLeave来确定用户何时将一个部分更改为另一个部分，在执行此操作时，我会添加一些CSS类来加载图像。

看看this related topic。

看起来与此类似：

 $.fn.fullpage({
     onLeave: function(index, nextIndex, direction){
         //when moving to section 2
         if (nextIndex == '2') {
             $('#section2').find('.slide').addClass('loadImage');
         }
     }
 });

课程loadImage会为其添加背景，使图片仅在您到达部分或幻灯片时加载：

//for a section
#section1.loadImage{
    background: url(../img/portraits/01.jpg) no-repeat center;
}

//for a slide
#slide1.loadImage{
    background: url(../img/portraits/01.jpg) no-repeat center;
}

将图像加载到滑块的最佳方法

2 个答案: