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

我正在建立一个架构师网站，显示架构师的项目。 每个项目有8-12张图片，在高分辨率下，项目数量为12个。我想在滑块上显示每个项目的图片。每个项目占页面的100%，因此页面被划分为多个部分（行），每个部分都是一个带有包含图片的滑块的项目

对于slider，我使用ioslider插件，对于部分，我使用fullPage插件。您可以在以下地址查看网站：

这是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>

现在，因为这个页面将包含很多图片，所以在手机上加载速度会非常慢。因此，我所做的是在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
                            });
                        }); 
                    }); 

$（'.'lh'）.find（'.keys'）.bind（'mouseover'，function（）{
对于（var i=1；i<11；i++）{
$（'.lh-s'）。附加（“”）；
} 
$（'.lh'）。每个（函数（a）{
$（此）({
//插件材料
});
}); 
}); 

我的问题是：哪种浏览方式更快？就像我现在做的那样-用

.append

加载div，并给它们外部css图片，然后为每个项目加载一个插件（如果用户全部单击，最后总共12个插件）

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

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

第二个选项将使HTML文件充满div，这将使加载速度变慢，除了JS

你觉得怎么样

谢谢， Boaz.

您可以使用近两张幻灯片的“.load（）”内容。我的意思是，如果你有活动的幻灯片nr 3，那么你从幻灯片2和幻灯片4加载内容

---

这将是你写的东西。

HTML结构不会在你的站点加载过程中产生任何延迟

问题总是在大的外部文件上，主要是在图像上

为了避免图像出现问题，我建议您使用fullpage.js中可用的回调，例如

onLeave

或

afterLoad

我个人会使用

onLeave

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

看一看

它看起来与此类似：

 $.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;
}

---

好主意，我该怎么做？简单地使用if语句？方向做什么？确定滚动将发生的方向。（上，下）。你可以找到解释

//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;
}