Question

Have the following code:

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

    });  
 });

Works all fine, but now I would like the load() / show() function only be called if #content does not already contain blogs.html.

In other words: I would like to check if blogs.html is already loaded and if yes, simply do nothing and only if not there yet I would load and show it.

Have tried some things with hasClass() and some if-formulas but struggle to get this check.

Tried stuff like this:

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

Basically I just need to know how I can check if blogs.html is already the contents of #content.

Thanks a lot for any help. Regards, Andi

Answer 1

Add an ID to some element in blogs.html, say blogsloaded, then you can check for it with:

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

Another method would be to store in a variable if you already loaded it:

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