如何檢查某個html片段是否已經加載？

有以下代碼：如何檢查某個html片段是否已經加載？

$("#blogs").mouseover(
    function() { 
     $(this).addClass("hover"); 

     $("#home").removeClass("hover"); 
     $("#homepages").removeClass("hover"); 
     $("#apps").removeClass("hover"); 
     $("#facebook").removeClass("hover"); 
     $("#kontakt").removeClass("hover"); 

     $("#content").hide().load("blogs.html", function(){ 
     $("#content").show("slide"); 

    }); 
});

工作都很好，但我現在想的負荷（）/播放（）函數，如果＃內容沒有包含blogs.html只能叫。

換句話說：我想檢查blogs.html是否已經加載，如果是的話，什麼也不做，只有在沒有的時候纔會加載並顯示它。

已經嘗試了一些HasClass（）和一些if-formula的東西，但很難得到這個檢查。

嘗試這樣的東西：

$("#content section").hasClass("check_blog").hide().load("blogs.html", function(){ 
$("#content").show("slide");

基本上，我只需要知道我怎麼能檢查是否blogs.html已經＃內容的內容。

非常感謝您的幫助。問候，安迪

來源

2012-12-21 Andi Erni

如果你發佈展示你迄今爲止嘗試了一些代碼，這將有助於做這樣。 –

那麼#content開始空了？ –

你可以檢查id爲'content'的元素是否使用了像這樣的'html if（$（'＃content'）。html（）==''）{...' – EmCo

的ID添加一些元素blogs.html，說blogsloaded，那麼你可以檢查它：

if (!$("#blogsloaded").length) 
    $("#content").hide().load("blogs.html" ...

另一種方法是在一個變量來存儲，如果你已經裝好了：

if (!this.blogsloaded) 
{ 
    this.blogsloaded=true; 
    $("#content").hide().load("blogs.html" ... 
}

來源

2012-12-21 21:28:34

第一個人做了這份工作 - 非常感謝你！ –

我會分裂你的mouseover事件到兩個命名空間事件。一個只能運行一次。

// This event will only run once 
$("#blogs").on("mouseover.runonce", function() { 
    $("#content").load("blogs.html"); 
}); 

// because this event will unbind the previous one 
$("#blogs").on("mouseover.alwaysrun", function() { 
    $(this).off("mouseover.runonce"); 

    $(this).addClass("hover"); 

    $("#home").removeClass("hover"); 
    $("#homepages").removeClass("hover"); 
    $("#apps").removeClass("hover"); 
    $("#facebook").removeClass("hover"); 
    $("#kontakt").removeClass("hover"); 

    $("#content").hide(); 
});

來源

2012-12-21 21:27:54

我認爲他仍然想在功能上做其他的東西，但。 –

它沒有退出功能。當前執行的函數仍然會運行。但事件將不受限制，因此不會再發生。 –

是的，但是當用戶再次懸停時，什麼都不會發生。我認爲OP希望所有其他事情再次發生（例如addClass（「懸停」）），而不是負載。 –

-1

你可以做這樣的事情：

$("#blogs").mouseover(
function() { 
    $(this).addClass("hover"); 

    $("#home").removeClass("hover"); 
    $("#homepages").removeClass("hover"); 
    $("#apps").removeClass("hover"); 
    $("#facebook").removeClass("hover"); 
    $("#kontakt").removeClass("hover"); 

    if($('#content').html() == '') { 
    $("#content").hide().load("blogs.html", function(){ 
    $("#content").show("slide"); 
    }); 
    } 
});

來源

2012-12-21 21:37:23 EmCo

更新#content上的數據屬性，其中包含當前加載的內容的url或id。另外，您應該處理在前一次加載完成之前用戶將鼠標懸停在不同部分上的情況。

var request; // use this same var for all, don't re-declare it 
$("#blogs").mouseover(function() { 

    // exit event if the blog is the current content in #content 
    if ($("#content").data("current") == "blog") return; 

    $("#content").data("current","blog"); 
    $(this).addClass("hover"); 
    $("#home").removeClass("hover"); 
    $("#homepages").removeClass("hover"); 
    $("#apps").removeClass("hover"); 
    $("#facebook").removeClass("hover"); 
    $("#kontakt").removeClass("hover"); 

    // if a previous request is still pending, abort it 
    if ($.isFunction(request.abort) && request.state() == "pending") request.abort(); 

    // request content 
    request = $.get("blogs.html"); 
    $("#content").hide(); 

    // when content is done loading, update #content element 
    request.done(function(result){ 
     $("#content").html(result); 
    }); 
});

我強烈建議不要使用懸停來加載帶有ajax的內容。

此外，在它的當前形式中，這段代碼不是很可重用，每個鏈接都必須有一個。我建議改爲使用類，只有一個事件綁定處理所有鏈接。

來源

2012-12-21 21:42:38

可以使用.has()檢測的內容

後裔

$("#blogs").mouseover(
    function() { 
     $(this).addClass("hover");  
     $("#home,#homepages,#apps,#facebook,#kontakt").removeClass("hover"); 
     var $c = $("#content"); 
     if($c.has('.check_blog')){ // if content contains an element with that class 
      $("#content").hide().load("blogs.html", function(){ 
      $("#content").show("slide"); 
     } 

    }); 
});

來源

2012-12-21 21:45:56

非常感謝，我學會了如何縮短我的代碼。 –

如何檢查某個html片段是否已經加載？

回答

相關問題