When是使用addClass(）时加载的背景图像

When is a background image loaded when using addClass()?

本文关键字：加载 背景 图像 addClass When      更新时间：2023-09-26

我在这里做了一些研究，留下的印象是，如果相关的div类不在HTML中，则不会加载背景图像。这让我相信，当使用addClass（）为带有背景图像的类分配div时，我需要刷新CSS以加载图像。但是，它显示时没有刷新CSS。

在JavaScript中包含该类是否会导致CSS预加载图像，从而在添加该类时做好准备？如果没有，为什么背景图像在不刷新CSS的情况下可用？

HTML

    <body>
    <div class="no-class"></div>
    </body>

CSS

    .background-image {
       background-image: url('image.png');
       background-size: 100% 100%;
     }
    .no-class {
       height: 500px;
       width:500px;
       background-color: red;
     }

JS-

    $(document).ready(function () {
        $('.no-class').click(function() {
          $('.no-class').toggleClass('background-image');
         });
     })

重新排列类

.no-class {
   height: 500px;
   width:500px;
   background-color: red;
}
.background-image {
   background-image: url('image.png');
   background-size: 100% 100%;
}

并且一定要包括Jquery

演示

如果你有一个以上的元素带有class.no class..使用$（this）

$(document).ready(function () {
    $('.no-class').click(function() {
      $(this).toggleClass('background-image');
    });
 })
相关文章：