簡體   English   中英

HTML元素的內容何時完全加載有事件嗎?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM