I've seen a few tutorials on how to create a JavaScript preloader for images. Is it possible to use a JavaScript preloader for other JavaScript?
My website uses mootools (and others too) for animations and a copious amount of pictures, etc -- therefore it takes awhile to load. Is it possible for the website to have a "loading" centered in the page -- and nothing more -- until all the Javascript libraries load, all the images load, etc. The website has around 300k of JavaScript (compressed), 800k of images on the front page.
In pure flash design, it's possible to have the flash movie simply say loading before any of the associated libraries, other code, images, download and appear. Can this be done in JavaScript?
Execute all your code on window.onload()
Here's a ridiculously simple example to give you the basic idea: http://jsfiddle.net/kennis/jHJ3T/1/
Think of the hideous red div as your preloader. Once the document loads all the resources (images, js files, whatever), the preloader disappears and your content is now visible and your javascript libraries have been fully loaded and are ready to execute.
If you want run the jsfiddle example more than once, change the "random" values at the end of the image tags so your browser doesn't pull cached versions.
Related
I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.
I am trying to block gif's from loading, specifically animated gifs, but if that is not possible, then all gif's. The point is to reduce bandwidth. I am able to remove elements using .remove() and jQuery, but this still means they load. Is there a way to block the specific requests for the gifs so that they do not even load in the first place?
Edit: I am talking about making a Google Chrome extension
You will run into timing issues. If you use a content script you can remove those dom elements but since your extension activates when the page is fully loaded and ready, by then probably chrome already loaded them.
Small animated gifs dont consume much bandwith unless youre talking about the recent trend of making short videos with gifs. For those large ones you might prevent some frames from loading.
I am in the process of creating an online portfolio and I am using the Isotope jquery to present images on my site. The problem I'm having is that when you go to my site the content loads and sits for a second before self-organizing using the Isotope jquery.
I have 2 linked CSS files (one local and one on a separate hosted site), the latest Jquery (hosted on Jquery's site), and then the Isotope script (hosted locally). Is this amount of referencing files the cause of the slow self-organizing with the Isotope script? If I hosted all of these locally would it run faster?
Because you are waiting until the whole page is loaded before setting up Isotope, the browser has to wait not just for the code to download, but also for all the elements to download, the images, the video player javascript and so on. So only when everything is ready is isotope moving stuff around: leading to the delay you see.
That may be necessary, if the size of all the content is only available after it has been loaded.
To improve performance.
Put explicit sizes on any content to be loaded (like images, video).
Move the jquery, isotope and isotope initialization script tags to the end of your HTML body.
Don't wrap the init in a document load handler.
Then what will happen is the HTML page will load first, then as all the images and other stuff are loading, the browser will load each of the script tags in order, when it has loaded isotope, it will call your init script which will arrange everything right then. Isotope will cope because everything it needs to know the size of has its size set, and as the browser continues to receive the resources it is loading, they'll appear in the correct location.
There are some good reasons for doing things in an onLoad handler, but often putting your scripts at the bottom of the page is just as good, unless your script needs any data coming in from other external files (like CSS, or images).
Is it possible to find out when a page of an EPUB Fixed Layout is being viewed with Javascript?
There is the DOMContentLoaded event, but the adjacent pages also fire this event when they are preloaded in iBooks, causing animations or sounds to start before the page being visible...
No, it's not.
This is a "feature" of iBooks. It preloads the pages, I suppose to make page turns faster later on. Unfortunately, there is no way to detect that a page is preloading as opposed to being actually viewed.
There's only one way to deal with this--force user interaction on each page (tapping something) to start the animations or sounds. You may even need to structure your JS so that the JS itself is not loaded until the user interaction occurs. Videos won't start playing without user interaction anyway.
On a lot of the pages I work with there are a lot of external(non-critical) external images and js files that get called that affect the load time. One of these is a tracking pixel for an ad company that sometimes can take a few seconds to load and you can see this hanging in the browser so it gives a poor user experience. Is there a way that I can load these and not have them count as the initial page load? I've seen similar things that launch a timer and once the timer fires they load but I'm worried that if the user leaves the page too quickly the tracking pixel wont have time to load.
Not really - the point of tracking using a gif is to track users regardless of whether they have javascript or not. Delaying the load of the gif would require javascript, so would defeat the point and potentially mess up your stats.
The best method is to put these 'unnecessary for page load' things at the end of the code, inside the closing body tag.
If you can load the tracking pixel further down on the webpage, preferably as close to the end BODY tag as possible, it will likely process all other content prior to that image first, making the page load appear to occur faster in the event the image isn't loading very fast.
This can be explained (if taken slightly out of context) by Yahoo YSlow's "Best Practices for Speeding up your Website" section on put scripts at the bottom.