I'm building an architect website, which shows the projects of the architect.
Each project has 8-12 pictures, in high-res, the number of projects is 12. I want to show the pictures of each project on a slider. Each project takes a 100% of the page, so the page is divided into sections (rows), every section is a project with slider that contains pictures.

For the slider I'm using iosSlider plugin, and for the sections I'm using fullPage plugin. You can see the website at this address: <http://boazkerengil.com/projects>

Here is the 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>

```

and here is the 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;
        }

```

Now because this page will contain a lot of pictures it will load really really slow on mobile. so what i did is use a FOR loop in JS to append the pictures only when the user clicks the section, and after that the for loop applies the JS to the section to make it a slider. 

```
                $('#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
                            });
                        }); 
                    }); 

```

My question is: which way is faster for browsing? Like I do now - load the divs with `.append` and giving them pictures with external css and after that load a plugin for each project (total of 12 plugins by the end, if the user clicks them all)

OR to load the plugin once for all the projects (which is DRYier) at document ready and put all the divs already in the HTML without any css. when the user will click a section, the for loop will load the css with .css event in jQuery

I personally think the first option is better. it loads the page "naked" and faster - without any JS and without any pictures, except the first one in each project.

The second option will make the HTML file full of divs which will make it load slower, in addition to the JS.

What do you think?

Thanks,
Boaz.