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?

Ben Thomas · Accepted Answer · 2017-06-21 10:31:54Z

2

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();
});

edited Jun 21, 2017 at 10:31

Ben Thomas

3,2082 gold badges22 silver badges39 bronze badges

answered Jun 21, 2017 at 4:01

Binary Brackets

5041 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nippledisaster Over a year ago

Hi, Can you check whats wrong with your code? i'm still quite a newbie and there seem to be some errors on this code

Binary Brackets Over a year ago

please try now , there was two : : with background-image

Nippledisaster Over a year ago

Still getting some errors, Uncaught SyntaxError: Unexpected token ILLEGAL

Vivek Doshi Over a year ago

@Nippledisaster, just forgot the single quotes

Nilesh Khisadiya · Accepted Answer · 2017-06-21 04:56:06Z

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>

clarkoy · Accepted Answer · 2017-06-21 04:00:27Z

0

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"');
})

answered Jun 21, 2017 at 4:00

clarkoy

4103 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery/JavaScript Load div background Images after clicking a button

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related