CODEWITHSUNDEEP
jqueryhtmlperformanceiframeresize
Ann L.
Ann L.

Reputation: 13975

Would hiding iframes during the resize of a container DIV speed up the response?

Folks,

I have a DIV that contains a number of IFrames (long story). The DIV can be resized by the user, and the iFrames change size along with it. However, the resizing process is slow and choppy, with the size changing in "bursts".

Would hiding the iFrames during the resize speed this up?

Is there a best practice for temporarily hiding an iFrame? I seem to remember people elsewhere recommending slightly exotic methods for hiding them, although I don't recall why.

Thanks, Ann L.

Upvotes: 1

Views: 265

Answers (3)

jfriend00
jfriend00

Reputation: 707786

One way to solve this problem is to not carry out the actual resize on the resize event (which leads to the choppiness because it gets called so often), but rather to set a timer on the resize and only do the actual resize when the window size hasn't changed for a second or two. Then, the user can freely resize the window and when they pause, it lays out the interior without any of the intermediate choppiness. In general, it works like this:

var resizeTimer = null;

function doActualResize() {
    resizeTimer = null;
    // do your window interior resize here 
    // won't get called more than once per second because of timer
}

window.onresize = function() {
    // clear any prior timer that hasn't fired yet
    if (resizeTimer) {
        clearTimeout(resizeTimer);
    }
    // set new timer to wait for 1 second of no further resize motion
    resizeTimer = setTimeout(doActualResize, 1000);
}

Upvotes: 1

rlemon
rlemon

Reputation: 17667

Another option would be to show a 'bounding box' or 'preview' of the area in which you are applying the resize. Similar to The dotted border you see when re sizing the example here

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

The less there is on the screen, the faster the reflow. If you can hide elements until a complex DOM change is complete you'll force an additional redraw at the end, but the intermediate steps should be faster.

Upvotes: 1

Related Questions