當使用addClass（）加載背景圖像時？

我在這裏做了一些研究，並且留下了一個印象，即如果關聯的div類不在HTML中，則背景圖片不會被加載。這讓我相信，當使用addClass（）爲背景圖像分配類時，我需要刷新CSS以使圖像加載。但是，它沒有刷新CSS就顯示出來了。當使用addClass（）加載背景圖像時？

在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; 
    }

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

來源

2015-11-10 Matthew McClure

-2

重新組織類

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

而且一定要包括jQuery的

DEMO

，如果您有帶班。無級超過1元..使用$（本）

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

來源

2015-11-10 03:53:05

謝謝你的語法更正- 我還在學習。我希望找出它爲什麼有效。瀏覽器是否繼續並預載了背景圖片，因爲該類是在腳本中列出的？或者被添加的類是否會導致CSS重新運行以獲取到背景圖片的鏈接？我可能是錯的，但我認爲唯一可以加載的圖像是HTML中列出的類。 –

@MatthewMcClure http://stackoverflow.com/questions/460389/browser-caching-of-css-files希望它幫助 –

當使用addClass（）加載背景圖像時？

回答

相關問題