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

乳头灾难

我有一个隐藏的 div,其中至少包含 +20 个跨度,每个跨度都有一个大尺寸的背景图像,就像这样

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

$( ".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>
因此,对于页面加载速度和性能,
除非单击切换按钮以显示,否则如何使该 div 不呈现在我的网站上?或者也许只有在我点击切换按钮后才以某种方式加载背景图像?

二进制括号

不要在 dom 元素内提供图像,因此它不会在页面加载时加载它,在单击切换图像时使其可用。

一种方法是:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JavaScript:单击按钮后将图像加载到div中

来自分类Dev

背景图像未加载到按钮iOS 8 Swift

来自分类Dev

仅在完全加载后淡入背景图像

来自分类Dev

在C#中,单击后更改按钮的背景图像

来自分类Dev

加载大背景图像

来自分类Dev

程序编译后将不会加载网格背景图像

来自分类Dev

选择上的多个单选按钮将div与向下箭头附加为背景图像

来自分类Dev

加载适当大小的整页背景图像

来自分类Dev

页面加载随机背景图像

来自分类Dev

从jQuery数组加载CSS背景图像

来自分类Dev

在加载时淡入背景图像

来自分类Dev

在加载时淡入背景图像

来自分类Dev

Div表带:将窗口调整至特定点后,背景图像开始缩小

来自分类Dev

加载某个div,带有指标并在完成后单击某个按钮

来自分类Dev

Jquery:单击该div的删除按钮后页面正在重新加载

来自分类Dev

单击按钮将内容加载到div

来自分类Dev

将 JSON 加载到 div 中并同时更改按钮单击的背景颜色

来自分类Dev

动态加载的图像用作包含div的背景

来自分类Dev

在一个div中单击,在另一个div中更改背景图像

来自分类Dev

使div的背景图像连续移动

来自分类Dev

使div背景图像响应自举3

来自分类Dev

如何使div背景图像响应

来自分类Dev

缩放div以适合背景图像

来自分类Dev

如何使div背景图像响应?

来自分类Dev

<div>中的背景图像不显示

来自分类Dev

隐藏特定div的背景图像

来自分类Dev

以编程方式添加DIV背景图像

来自分类Dev

DIV中的背景图像未显示?

来自分类Dev

使div透明并显示背景图像