I have Large.html, which is a web page that has a lot of images and javascript on it which takes a long time to load.
From other pages (a.html, b.html) how can I use JavaScript to prefetch Large.html (and all of the elements on the page) so that I can get the page cached in the users browser to help speed up page loading.
Would I need to use a hidden IFRAME?
You could just load the body of the page, put it into the innerHTML of a div that has 'display: none', and wait for a bit, then make the current div have a display of none and the div with the new page becomes visible.
It may still need to go out and actually download the images, but it should basically be preloaded.
yes, i would use a Hidden Iframe. That will, in general, take care of exercising scripts that might run and load in additional assets on that slow-to-load page.
If you do this, be sure to do it after the load of the a.html page so that you are not stopping the user interacting on this page.
I say if, because you often don't know for sure that the user will load the Large.html page.
Other than that if the large parts of the other page are mostly images, I would load them, and not the entire page (html, css, js, & images) in an iframe.
I've seen too many sites that try to load the entire content (hidden) in an iframe... and in the process make the current page unusable. :-(
Related
I have content. They are all different (generated from widgets on Wordpress), and they all need to be pulled apart and concatenated in various ways. Basically on window.load, the javascript loops through each of the widgets, takes out the content, then puts them in clean containers in a specific order, then fades them in nicely. This works perfectly.
In comes Twitter. Twitter has a script that loads an iframe. The Twitter script is inside a widget. I'm doing the same thing, taking the contents of the widget and dumping it into a new container. This causes it such that I'm taking the Twitter script and putting it into a new container before the iframe has loaded. Somewhere along this journey, the iframe never loads. I don't want to manipulate the content inside the iframe by an means, I just want it to load in the container I choose.
My question is: is this process wrong? Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container? It seems as if the iframe doesn't load until the page is loaded, but my javascript is interrupting the load process and stopping.
I'm not sure if I'm explaining this correctly, nor do I have example code that is in simplified form. Is this question answerable without these things? Thanks for the help in advance.
Edit: Taking out window.onload solved the problem. Meaning, window.load was probably interrupting the iframe from loading. However, window.load is necessary. Any other ideas?
So, the answer to my question :
Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container?
No. Currently, there's no way to do this. See reference The Twitter script was firing right away, and the window.onload was being rightfully interrupting.
The Twitter embed script is in two parts: an element and the inline script. My workaround was to keep the script inside the javascript, and keep the element in the widget (so the client can switch off, have multiple twitter account embeds, etc). Then, after the DOM elements are finished shuffling around and into their respective containers, I insert the script into the widget for twitter.
The iframe load, and tada! No more half-loaded twitter iframe.
Suppose I have a python script that dumps a 1000 images on a webpage, when the user opens the webpage, the browser tries to open all of them at once, which slows down the page.
Is there any way to make sure that only those images are loaded, which lie in the current field of view of the user, to somehow load them depending upon the position of the scroll bar ?
We call this design pattern Lazy Loading. There already lots of plugins achieved it, such as loading images by scrolling. Say
Lazy Load Plugin for jQuery:
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages. Images outside of viewport (visible part
of web page) wont be loaded before user scrolls to them. This is
opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes
the page load faster. Browser will be in ready state after loading
visible images. In some cases it can also help to reduce server load.
You can go to their web page to checkout the full example and api.
Normally, html navigation will release the first html page and load another.
But I hope to navigate from one html page to another but keep them in memory both, thus I can apply the document messages.
Is it possible?
Welcome any comment.
Yes and no.
No, you cannot change page and keep the old page in memory.
Yes, you can store the current window.document into a variable and then over-write the entire page with content loaded via AJAX from another page.
This method won't really load the new page though. The url will be the same, the title will be unchanged, really only the DOM will be updated.
You could try to use tabs
http://www.w3.org/Style/Examples/007/target.en.html#tab1
Putting your contentent for each page in a separate tab div and play with the formatting / navigation to simulate moving between pages to make it look to the user they are navigating pages but are really tabbing through a single page.
if you want to use messages (onmessage, postMessage), you can do that with frames, iframes to be specific. One parent window with two iframe windows and they can talk to each other (also over different domains, so the Same Origin Policy doesn't apply) utilizing onmessege and postMessege. If the two iframes dont load a page from the same domain, you will not be able to access the window/DOM
I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)
I have a web page where I have two iframes. I set the url (location) of the iframes in the page onload event. This is done to "delay load" the content. That is, the main page content is rendered first, then the iframe content with e.g. Like buttons, trust logos etc. are displayed. This speeds up the page rendering considerably.
However...
Clicking the back button first removes the trust logo. Then another back button click removes the Like buttons. The third click finally takes the user to the previous page.
Is there any way to avoid the URLs of the iframes to go into the browser history, while maintaining the above functionality?
Thanks!
Avoid using iFrames, if you really want to improve rendering like this, use AJAX. However there are numerous other problems if your page actually renders slow, how large is it, and how is it structured?