One thing that bugs me about IE is that when it goes to load a page with an iframe it will wait until the iframe has finished loading before it will render the page. Firefox by contrast will render all the other page elements while the iframe is loading which is really nice if the iframe takes a long time to load because it gives the user some feedback that the page is progressing. It also allows you to do things like display a "iframe loading" messege while the frame loads and swap it out onload of the iframe.
So, I am wondering if anyone has found a workaround for this. Ideally, I'd like to see a cross browser solution that shows a progess bar as an iframe loads on the page. Short of that I'd take a method of implementing an iframe that forces IE to first render the page then load the iframe.
I have seen a couple of interesting jquery progress bars like:
http://plugins.jquery.com/project/jQueryProgressBar
But...(and correct me if I'm wrong here cause my understanding is shaky)...it seems to me the jquery bars only render after the DOM has loaded. In IE the iframe content is not shown until after the DOM is loaded so showing a progress bar at that point is irrelevant.
I've also tried setting the iframe src to loading.htm and then onload switch the src to the content I want. Sadly IE still will not render the page until the final content page comes up (seems strange to me).
Help me stackoverflow, you're my only hope.
What if you were to load the page with an XmlHttpRequest and then replace the contents of the document as/when it loads?
<!-- jQuery example: -->
<div id='content'>Loading...</div>
<script type='text/javascript'>
$("#content").load(url);
</script>
You could set the location of your iframe using JavaScript after the parent window has loaded.
<body onload="document.getElementById('myIframe').location='someurl';">
<iframe id="myIframe">
</body>
Would be the most rudimentary way to do it.
Related
I have an html page with a pretty heavy iframe embedded there. I need to start loading that iframe after everything is already loaded in order not to block the whole page loading. I've tried setting its src attribute with JS after everything else is done. But when I do it this way the browser tab still says the loading is in process (there's a spinner instead of the favicon). How can I prevent that effect and load that iframe "silently"?
You could use the following (also using jQuery):
$('iframe').hide().attr('src', 'http://example.com').load(function() {
$(this).show();
}
I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.
I am developing a firefox plugin. I want to show a tooltip which contains the preview of the target page when user mouseover a link.
This is simple, But there is a time requirement. This process should get completed before 1 sec(After user mouseover the link.)
Any Ideas on where to start?
You should create an add-on that scans the content document DOM for anchor tags after the page has loaded (i.e. when the DOMContentLoaded event is received). The old-style way to do this is to use a XUL overlay. Presumably the same thing can be done with the Addon SDK using a content script.
You'd then have to load each link into a hidden iframe (e.g. set the height to zero) and create a screenshot as described here: https://developer.mozilla.org/en/drawing_graphics_with_canvas#Rendering_Web_Content_Into_A_Canvas. Note that the Mozilla Developer site is malfunctioning right now so code samples aren't showing up correctly (at least on the mirror that I am being served). I assume that will be fixed quickly since it's such a serious problem.
As Wladimir says, loading every linked page and making a screenshot will potentially take quite a long time, so if the user mouses over a link before then I would a) display throbber and "Loading..." text instead of the screenshot and b) prioritize the loading of that link so that the screenshot appears as quickly as possible.
With Firefox it's very simple. Just use the following element and the browser will preload your contents. Contents are preloaded in background, once the whole current page is loaded.
<link rel="prefetch" href="/images/nextimage.jpg" />
For more info, refer this page
I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.