1

i'm trying to ajax load some content and then replace existing content on the page with the newly downloaded content. The problem is that I need to bind load(handler(eventObject)) event for replaced data. I need that to trigger when all images are loaded. Here is what I have so far:

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});

I see an alert when the content is loaded, but it happens before images are loaded and alert on images load never happens (I also tried bind() instead of live() before). Does anyone know a fix for that?

8
  • 1
    This content, do you mean just images, or are there other types of additional resources?
    – Orbling
    Dec 7, 2010 at 0:18
  • @negative read this tip also web.enavu.com/daily-tip/…
    – kobe
    Dec 7, 2010 at 0:21
  • @Orbling, yes it is more than images, but I assume that I get all of them at .get() postback.
    – Maksim Vi.
    Dec 7, 2010 at 0:25
  • @gov what tip are talking about? I don't think it's an issue here.
    – Maksim Vi.
    Dec 7, 2010 at 0:26
  • @negative , got it it should have some callback function like ajax which gets executed after it completes the load , please see api , and you mean need to place your code there, i will remove my answer
    – kobe
    Dec 7, 2010 at 0:28

2 Answers 2

2

This may or may not be your problem, but it looks like the container you have attached your image load function to is being replaced when you load the ajax content:

$("#mainContentHolder").live("load", function(){ //you are attaching to current and future '#mainContentHolder' elements
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);  //'#mainContentHolder' element is replaced with something else
    alert("content is loaded!");
});

Not sure what content is coming back from your AJAX call, but if it doesn't have a #mainContentHolder element, there will be nothing for your image load event handler to attach to.

If that's not it, there's also this bit: (from http://api.jquery.com/load-event/)

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin.

Hopefully one of those will help you out.

3
  • With regard to cached objects, it's easier just to check for .complete on the object when binding the load event.
    – Orbling
    Dec 7, 2010 at 0:32
  • wow, so stupid of me, thanks, you are right. For some reason I assumed replaceWidth will replace the content of the container. I'll give it a try
    – Maksim Vi.
    Dec 7, 2010 at 0:37
  • 1
    If you do just want to replace content, instead of replacing the whole element, you can use .html() instead of .replaceWith(). See the documentation here: api.jquery.com/html
    – Ender
    Dec 7, 2010 at 0:42
0

Is it possible to put the $.get into the live load function?

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!");
$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});
});
2
  • Not in my case, because "images loaded" handler is supposed to trigger right after "content loaded" handler. Sorry if my explanation was not clear enough.
    – Maksim Vi.
    Dec 7, 2010 at 1:04
  • How about putting .live("load",function()... after replaceWith(data)?
    – bozdoz
    Dec 7, 2010 at 1:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.