What causes the delay after jquery.js is loaded? and after jquery-ui-*.js as well? This is very consistant. As you can see, all resources except the PHP file are loaded from cache -- this makes me believe it may be that Chrome is doing its V8 magic on them?
Interestingly, it doesn't occur with the bootstrap-*.js files. Maybe they're much smaller?
jquery is a dependency of jquery-ui. Basically, jquery-ui can't be loaded until jquery is finished.
Related
I am using a JavaScript library to arrange few images on the webpage. The following browsers:
Firefox
IE 11
Microsoft edge
render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.
The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.
I've tried calling the function that arranges these images inside:
$(window).load(function() {})
and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?
What should be the correct point in time where the function should be called?
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
Images should load First as hidden, Then your script should run like
$(document).ready(function(){
// here do the scripting may be showing them one by one
});
I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.
The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.
Firstly, does the page load quickly for you?
How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.
Thanks in advance.
I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.
That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.
Your site's loading fine here.
For the Facebook "Like Box", consider using the iframe version.
http://developers.facebook.com/docs/reference/plugins/like-box/
After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.
I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.
For example
merge the javascripts you are loading from the same domain
set the webserver to use gzip to send script/html files compressed
many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
merging images like the social media pins and use css sprites
provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage
You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.
If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.
EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here:
I'm getting an issue with a javascript slideshow that I wish to embed in a WP header.
Here is the slideshow designed and ready to use: http://coachjoelleinc.com/wp-content/themes/32950/rotator/test.html
And this is where I want to embed it: http://coachjoelleinc.com/index_real.php/
In older versions of Firefox it disables other plugins, such as the navigation.
Any advice would be much appreciated.
It's looking fine in Chrome for me but the issues with older browsers might be caused by the fact you've loaded the jQuery library twice. Wordpress is loading the version that came with it (1.7.2) but prior to that version 1.5.1 is being loaded - probably by your theme's header.php rather than a plugin, the file is in the themes directory.
Bear in mind you have to load jQuery before you load all the scripts that rely on it, so if you remove the older version which is being loaded first you will need to make sure the other dependant scripts load are moved so they are loaded after the newer version of the jQuery library is loaded.
There are various ways to do that - you can enqueue them in functions.php, or move those scripts into the footer. A quick Google comes up the Codex Javascript guide along with some examples of including JS in Wordpress
Using IE8 and headjs
I have a template header template file that has a head.ready(function(){}) in it. This page is loaded my all my pages.
On some page, I have scripts in the code that call the head.ready (which means it would be on the page twice because of the above header template). I noticed that putting an additional head.ready(function(){}) works in Chrome/FF, however it appears not to work in IE8. Only the first ready call seems to work. The second one does not fire.
Does anyone know if this is an issue in IE8 and if there is a simple workaround?
It might be an untested bug with IE8.
You'll probably have to poke at the source code which is never fun or try reporting it to the author.
Did you try any alternatives? YepNope? RequireJS? LabJS?
I wrote my own to be as small and simple as possible:
https://github.com/sgarbesi/fallback.js
I'm trying to lazy load javascripts, but I can't get it to work reliably. My pages load quite quickly and I want to keep it that way, so I'm not about to use a timeout to delay the loading. Besides document.readyState, how do I ensure the DOM is genuinely ready for modification?
Method I:
poll readyState
createElement script
src = url
appendElement to head
Results:
IE8: always aborts
FF3: loads first time, aborts every
other
Chrome: loads first time, aborts every
other
Method II: (lazyload included in head tag)
load with lazyload
Results:
IE8: always aborts
FF3: works
Chrome: loads first time, aborts every
other
If you put your <script> tag just above the </body> tag, you could do most things with DOM without it raising any errors, i.e. anything that is above the <script> tag is usually up for modification.
However, if you are looking for a more robust solution, you might have some progress by checking out how the major libraries are detecting if the DOM is ready, here's one for starters (jQuery): http://github.com/jquery/jquery/blob/master/src/core.js#L393
Javascript is hardly usable cross-browsers without a decent framework to help you span the differences. Probably most popular today is jquery, where, per this tutorial, you could use $(document).ready(). In dojo, also quite popular, you could use addOnLoad. And so on... and if you aren't using any framework, you're making life too hard for yourself: do yourself a favor and pick a JS framework you like!-)