使用jQuery将元素插入DOM时，如何防止页面在加载时短暂跳转？

Question

I am moving a DIV (from a hidden iFrame) to the top of a page with jQuery, like so:

$(document).ready(function($) {
$('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer"));});

Whenever I reload that page, I very briefly see the original page jumping down to make room for the DIV I am inserting. Can this behavior be prevented?

What I'm doing now is give the "maincontainer" a large margin at the top with CSS that is roughly as high as the "precontainer" DIV that is inserted above it, and after that DIV is inserted, I use jQuery to remove the top margin from "maincontainer", so the jumping or flashing effect is less severe. But there has to be a better way right?

I should mention that I only have access to the iFrame that I am using to manipulate the DOM of its parent (which holds "maincontainer". I can not modify the parent, so I have to do everything through the iFrame.

Answer 1

Instead of giving a top-margin to parent page, you can place a "placeholder" div and insert your "precontainer" to this div. This way you shouldn't see a flickering/jumping effect.