PAGE 1
Including an external file with the help of javascript will often produce flicker on page entrance, with IE9 and Google Chrome, if the external page contains a big image and is supposed to load (via
onload) after the (main) page itself has finished loading.
A way to overcome this is to simply transfer the big image from the external file to the (main) page into which we want to insert the external file.
That's not the best solution. We can also do something like this (in the main page), after having removed the big image from the external file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function include_using_iframe_and_jquery(url,id)
{
$('html').append('<div id="
some_div" style="position:absolute; text-align: center; width:100%;border: 0px solid red;top:0px;left:0px;padding-left:10px"></div>');
$('html').append('<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:-1;"><img src="
your_big_image.jpg" style="position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden" alt=""></div>')
$('html').append('<iframe src="'+ url +'" name="framename" style="position:absolute; width:0px; height:0px; left:-10000px" onload="$(&
qquot;#'+ id +'&
qquot;).empty(); $(&
qquot;#'+ id +'&
qquot;).append(frames[\'framename\'].document.documentElement.innerHTML)"></iframe>')
}
</script>
<body onload="include_using_iframe_and_jquery('
your_external_file_without_big_image.html','
some_div')">
(Of course, you would make the script external, and use a more recent alternative for
<body onload...).
Strangely enought, the following jQuery based Ajax alternative does NOT remove the flicker:
<script>
$(document).ready(function() {
$('html').append('<div id="
some_div" style="position:absolute; text-align: center; width:100%;border: 0px solid red;top:0px;left:0px;padding-left:10px"></div>');
$('html').append('<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:-1;"><img src="your_big_image.jpg" style="position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden" alt=""></div>')
$('#some_div').load('your_external_file_without_big_image.html')
});
</script>
NOTE: the solution proposed above may not work on each page transition with Google Chrome.
Arie Molendijk.