Javascript 如何检查某个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时调用load（）/show（）函数

换句话说：我想检查blogs.html是否已经加载，如果已经加载，只需什么都不做，只有在还没有加载的情况下，我才会加载并显示它

我已经尝试了hasClass（）和一些if公式，但是很难得到这个检查

尝试过这样的东西：

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

$("#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"); 
    });  
   }
});

基本上，我只需要知道如何检查blogs.html是否已经是#content的内容

---

非常感谢你的帮助。您好，Andi

我会将您的鼠标悬停事件拆分为两个名称空间的事件。只运行一次的

// 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();
});​

---

将ID添加到blogs.html中的某个元素，例如

blogsloaded

，然后您可以使用以下工具检查该ID：

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

另一种方法是，如果已加载变量，则将其存储在变量中：

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

---

你可以这样做：

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

$("#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"); 
    });  
   }
});

---

更新

#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); 
    });
});

我强烈建议不要使用hover来加载ajax内容

---

另外，在它的当前形式下，这段代码不是很可重用，每个链接都必须有一段代码。我建议改为使用类，只使用一个事件绑定来处理所有链接。

您可以这样做，使用来检测内容的后代

$("#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"); 
      }

    });  
 });

---

如果您发布一些代码来显示您迄今为止所尝试的内容，这会有所帮助。那么#内容是否开始为空？您可以使用类似以下内容检查id为

content

的元素中是否包含html（$（'#content'）.html（）=''）{…在问题中添加了一些我尝试过的内容。抱歉，我不记得我尝试过什么，因为我已经再次删除了它，因为它根本不起作用…@wirey：不，它以一个名为home.html的内容开始。我用这个指令来表示鼠标悬停/悬停菜单栏……我想他仍然想在函数中做其他事情。它不会从函数中返回。当前正在执行的函数仍将运行。但事件将被解除绑定，因此不会再次发生。是的，但当用户再次悬停时，将不会发生任何事情。我认为OP希望其他所有事情都会再次发生（例如addClass（“hover”）），而不是加载。