[英]Is there an event for when the content of a HTML element has fully loaded?
我有一個包含許多圖像的<div>
。 我想在所有包含的圖像加載之后淡化這個<div>
,因為它們組成了一個單元,我寧願干凈地顯示而不是瞬間顯示(加載時)。
是否有類似於window.onLoad
東西,我可以應用於某個元素?
例如
$("#id").onLoad(function()
{
$(this).fadeIn(500);
});
var images = $("#id img");
var imgCount = images.size();
var i = 0;
images.load(function() {
if(++i == imgCount){
$("#id").fadeIn(500);
}
});
一種方法是在HTML文檔的head部分添加它:
$(function() {
$("#id").fadeIn(500);
});
$(function(){/ * code * /})背后的想法是,它將在加載DOM時運行,你可以在頭部中擁有盡可能多的這個,但它會更具可讀性恕我直言如果你只有一個。
另一種方法是在准備就緒時為每個頁面運行一個主javascript文件,讓我們調用HTML文件index.html和javascript文件index.js
的index.html
<!doctype html>
<head>
<!- include the javascript/css/etc. files -->
<script type="text/javascript" language="javascript">
$(function() {
// the following function exists in index.js file
onPageLoadedIndex();
});
$(function() {
// this code will also be executed when the DOM is ready
// however I strongly recommend having only one of these
});
</script>
</head>
<body>
<!-- snip -->
</body>
</html>
index.js
function onPageLoadedIndex() {
// some code
$("#id").fadeIn(500);
// more code
}
通過這種方式,您將避免在HTML頁面中使用過多的javascript
您可能已經知道如何分配在頁面加載時運行的函數。 如果你不這樣做,請嘗試:
window.onload = function() {
$('div').fadeIn(500);
}
jQuery唯一的解決方案:
$('div img.class').load(function() {
// img.class is your largest (in bytes) image.
$('div').fadeIn(500);
});
嘗試這個:
$("#id").load(function()
{
$(this).fadeIn(500);
});
祝好運
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.