Question

我有一个隐藏的div，其中包含至少+20个跨度，每个跨度都使用大尺寸的背景图像

此div仅隐藏并显示一个按钮，因此使用的背景图像始终在页面加载时加载

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 因此，对于页面加载速度和性能
我怎么能让这个div不在我的网站上呈现，除非我点击切换显示？或者仅在我点击切换按钮后加载背景图像？

Answer 1

不要在dom元素中提供图像，因此它不会在页面加载时加载它，只需点击你的toggleimages即可使用。

一种做法是：

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

＆＃13;

$(document).on('change', '.many-checkbox', function() {
  setTimeout(function(){ 
    // do something
  }, 100);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用.html功能，因为您想在单击按钮

时渲染图像

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

jQuery / JavaScript加载div背景单击按钮后的图像

3 个答案: