Working with big images in DOM
<p>I'm having some troubles while working with big images in DOM, like up to 1mb size.
The main problem is the fact that, also all the images are already cached, the loading of them into DOM takes considerable amount of time - even when I'm doing it just by changing the src attribute. I'm doing kind of a gallery widget for displaying large mockups, so the big image size cannot be helped.
So, what is the proper pattern for working with larger images? Is it possible to gain a reasonable performance boost?
I should also mention that the image size gets changed with css. I do this to give the user the ability to fullscreen the image later.</p>

<p>Thank you very much!</p>

<p><strong>UPD:</strong>
Seems that my problem has been misinterpreted. The problem isn't with the initial loading of the images, but with the showing of the image.
The code that gives me trouble is this:</p>

<pre><code>function loadImage($el, fullPath) {
    el.one('load', function() {
        ivgLoader.hide();
    });

    el.attr('src', fullPath);
}
</code></pre>

<p>When I try to change the src, the image doesn't change itself immediately, but in 2-3 seconds interval, which is kinda sloppy. I wouldn't mind showing a loader for this time, but the image doesn't trigger load event after it's initial loading.</p>
