jQuery/JavaScript Load div background Images after clicking a button

Question

I have a hidden div that contains at least +20 spans each with a big sized background images used on like this

This div is only hidden and shows with a button so the used background images are always loading on page load

 $( ".toggleimages" ).on( "click", function(e) { e.preventDefault(); $(".bgcontainer").slideToggle(); }); 

 li{ list-style-type: none; font-size: 35px; cursor: pointer; } span{ display: inline-block; width: 200px; height: 140px; background-size: cover; } .bgcontainer{ display: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> <div class="bgcontainer"> <div class="container"> <span class="bgImage"> <span style="background-image: url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit);"></span> </span> <span class="bgImage"> <span style="background-image: url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit);"></span> </span> </div> </div> 

So, For page loading speed and performance
How can i make this div NOT to render on my website unless i click the toggle to show? or maybe somehow to load the background images only after i click on the toggle button?

Answer 1

Dont provide the images inside dom element , so it will not load it on page load , make it available on the click of your toggleimages.

One way of doing is :

var imagesArray = [
    'https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit',
    'https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit'
];

$( ".toggleimages" ).on( "click", function (e) {
    e.preventDefault();
    $(".bgcontainer .bgImage span").each(function (i) {
        $(this).attr('style','background-image: url('+ imagesArray[i] +'));
    });

    $(".bgcontainer").slideToggle();
});

Answer 2

 var images = ['https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit','https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit']; $( ".toggleimages" ).on( "click", function(e) { e.preventDefault(); $('.container').empty(); $.each(images, function(index, value){ $('.container').append('<span class="bgImage"><img src='+ value +'/></span>'); }); $(".bgcontainer").slideToggle(); }); 

 li{ list-style-type: none; font-size: 35px; cursor: pointer; } span{ display: inline-block; width: auto; height: 140px; background-size: cover; } .bgcontainer{ display: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> <div class="bgcontainer"> <div class="container"> </div> </div> 

Answer 3

You can use .html function since you want to render the image upon clicking the button

$('.toggleimages').on('click',function(){
  $('.container').html('<img src="http://placehold.it/250"');
})