Tips for using jQuery Load

jQuery is one of my favorite JavaScript framework, I started my ajax experience by using xajax and I even ajaxed one of the open source project – Lilina , then I try to learn about mooltools , but I can never manage it, I thought my ajax path is closed , until I start using jQuery .

My latest 2 project involved lots of jQuery , which remind me the old day when I start working on ajax and I even digging out some of the ajax tips that I already forgotten, so just want to share some of the basic tips for one of the basic jQuery function – load .
[unordered_list style=”tick”]

  • You can load partial content , example the file that I going to load might have 2 div , I can just load the second part of content, which allow me to put all these partial content in a single file.
    $('#content').load('contact.html #div2');
  • You should always load the content with dynamic number at the end of url , this prevent the browser cache the content, this is pretty obvious on IE , you might miss it if you using Firefox or Chrome.
    $('#content').load('contact.html/'+new Date().getTime()
  • Remember to make use of call back function , this allow you to perform a follow up action when the content is finishing loading. If not your next action might start before the content is complete loaded.
    $('#content').load('contact.html'+new Date().getTime(), function() { alert('Load was performed.');})
  • You can’t load a remote content/image which is out of your domain, the content won’t load and you will see some error message on Firefox/Chrome console, but you can trick it by loading piece of html with remote image.
    $('#content').load('<img src="remote img url">');
  • The above method won’t work if you need to perform a follow up action once the image finish loading, the alternative solution is this.
    $('#content > img').attr('src', img).load(function() { alert('Image Load was performed.'); }
  • One weird thing happen for above method on Firefox, it seem like Firefox will actually load twice for this code , compare to other browser which only load once, so I added a counter for Firefox browser to resolved this.


Share with me in the comments if you have any extra tips for using jQuery load !

You may also like...