jd: (wax lips)
who needs to think when your feet just go ([personal profile] jd) wrote in [site community profile] dw_dev2009-10-07 10:28 pm
Entry tags:

javascript, the inbox, livejournal.js, and DOMContentLoaded

While I was looking at livejournal.js, I noticed that it uses the DOMContentLoaded event to start initializing things going before all the images and video content finish loading, instead of waiting for the window.load event (which occurs after everything finishes loading, including large files). But esn_inbox.js doesn't do this; instead, it waits until window.load to enable the controls, pagination, etc. This is a problem because if you have notifications that have a lot of large filesize content, like videos or large images, or if an image is hosted on a really slow server, you have to wait until it downloads (or times out) in order to be able to do anything with the inbox.

Is it possible to make esn_inbox.js use DOMContentLoaded, and fall back to window.load for browsers that don't support it (which, as I understand it, is anything not Mozilla-based)? I tried copying code out of livejournal.js into appropriate spots in esn_inbox.js, but I'm not entirely sure that this will work (I have no way to test any of this). Thoughts on this code?

Take this existing bit:

var ESN_Inbox = {
    "hourglass": null,
    "selected_qids": []
};

DOM.addEventListener(window, "load", function (evt) {
  for (var i=0; i<folders.length; i++) {
      var folder = folders[i];

      ESN_Inbox.initTableSelection(folder);
      ESN_Inbox.initContentExpandButtons(folder);
      ESN_Inbox.initInboxBtns(folder, cur_folder);
  }
});
and make it look more like:

var ESN_Inbox = {
    "hourglass": null,
    "selected_qids": [],
    "pageLoaded": false
};

ESN_Inbox.initPage = function (evt) {
    // only run once
    if (ESN_Inbox.pageLoaded)
        return;
    ESN_Inbox.pageLoaded = true;
    for (var i=0; i<folders.length; i++) {
        var folder = folders[i];
        ESN_Inbox.initTableSelection(folder);
        ESN_Inbox.initContentExpandButtons(folder);
        ESN_Inbox.initInboxBtns(folder, cur_folder);
    }
};

// Set up two different ways to test if the page is loaded yet.
// The proper way is using DOMContentLoaded, but only Mozilla supports it.
{
    // Others
    DOM.addEventListener(window, "load", ESN_Inbox.initPage);

    // Mozilla
    DOM.addEventListener(window, "DOMContentLoaded", ESN_Inbox.initPage);
}
I'm asking here because I'm not sure if what I'm trying to do is even possible (or if it is, if it will work the way I think it will), and because I don't have a dev env set up. If this is fine, I can migrate to zilla, but I'm not sure how to generate a patch.