jQuery $.get loading

Question

Hi,

I'm using jQuery $.get method to load a page into facebox plugin, but the plugin alaways get a little laggy when openning the page. Is there a way to avoid that lag and display the contents only when they're ready?

Here's a live example of the problem (double click on any image) : http://aeon-dev.org/edit-in-place/

Cheers!

Answer 1

Have you noticed this in other places than your live example? One reason might be that the example needs optimization; you're scaling a 200k image down to a thumbnail with css! Of course it's loading slow!

Answer 2

Your current call has an extra facebox wrapper doing this:

$.facebox(function(jQuery) { 
  $.get('aeon_ce/dialogs/img.php', function(data) {
    $.facebox(data, o);
    img = new ace_img(o);
    $('#aeon_ce_img_title').attr('value', img.title);
    $('#aeon_ce_img_alt').attr('value', img.alt);
    $('#aeon_ce_img_src').attr('value', img.src);
    $('#aeon_ce_img_width').attr('value', img.width);
    $('#aeon_ce_img_height').attr('value', img.height);
  });
});

Just remove that and use only the $.get() in your dblclick handler (and use .val() to make it a bit shorter), like this:

$('img').live('dblclick', function(e) {
  e.preventDefault();
  o = this;
  $.get('aeon_ce/dialogs/img.php', function(data) { 
    $.facebox(data, o);
    img = new ace_img(o);
    $('#aeon_ce_img_title').val(img.title);
    $('#aeon_ce_img_alt').val(img.alt);
    $('#aeon_ce_img_src').val(img.src);
    $('#aeon_ce_img_width').val(img.width);
    $('#aeon_ce_img_height').val(img.height);
  });
});

This way nothing executes, showing a facebox until the callback runs...once you have the data. As a side note, I noticed /facebox/loading.gif and /facebox/closelabel.gif are missing, resulting in a few 404s on every open, fixing this will eliminate the slight delay it causes :)