I need to fire some javascript after the DOM and CSS is loaded, but not images. I believe that's after document.ready but before window.onload. Anyone know how to achieve this?
I was thinking of loading CSS after document.ready by iterating through document.styleSheets but it feels like a bad idea.
Update: The reason for this unusual requirement is that I need to predict the size which images will be rendered, which is determined by css. Moving the javascript to the bottom of the page solves the issue, but I'd like my script to work when that's not the case too.
I need to fire some javascript after the DOM and CSS is loaded, but not images. I believe that's after document.ready but before window.onload. Anyone know how to achieve this?
I was thinking of loading CSS after document.ready by iterating through document.styleSheets but it feels like a bad idea.
Update: The reason for this unusual requirement is that I need to predict the size which images will be rendered, which is determined by css. Moving the javascript to the bottom of the page solves the issue, but I'd like my script to work when that's not the case too.
Share Improve this question edited May 27, 2014 at 12:59 Zubin asked May 27, 2014 at 12:42 ZubinZubin 9,7827 gold badges51 silver badges53 bronze badges 5- 1 What's the actual goal here? I have doubt that your approach is correct. – No Results Found Commented May 27, 2014 at 12:43
- 2 check this stackoverflow./questions/23676129/… – Govind Singh Commented May 27, 2014 at 12:44
- Either @GovindSinghNagarkoti suggestion or use <body onload="function()"> – JakeSidSmith Commented May 27, 2014 at 12:46
-
I've added some more info as to why I'm doing this.
$(document).readydoes not load the css. – Zubin Commented May 27, 2014 at 13:04 - what exactly you need to do with the size of the images? – cocco Commented May 27, 2014 at 13:22
3 Answers
Reset to default 4You want the DOMContentLoaded event, together with an external script linked after all of the stylesheets.
From the linked page:
if you have a
<script>after a<link rel="stylesheet" ...>, the page will not finish parsing - andDOMContentLoadedwill not fire - until the stylesheet is loaded.
You could try to use a small image and add the handler to its onload event, see image.onload event and browser cache Add your code with this small image to document.ready.
Please could you elaborate what is your use case, and why putting the code on document.ready event handler would not do the job for you?
Another option would be to attach handlers to onload of each of the style tags, and each of this handlers to increment some counter, which you would check at the same time if the counter = style tags count. (You could determine the count of style tags, the same time you add the event handlers). When the counter has reached the number of style tags, you could fire your custom event, that could be used to have your code run. This however would fail if some of the stylesheets fail to load for some reason, so I would suggest adding a fallback to execute the code on window.onload if the above logic fails.
DOMContentLoaded is the first thing that is executed.
BUT
if i place an image like this in the html. and this image is cached then the image onload executes before DOMContentLoaded.
html
<img onload="console.log('imgLoaded');" src="http://placekitten./16/16">
js
window.addEventListener('DOMContentLoaded',function(){
console.log('DOMContentLoaded')
},false);
DEMO
http://jsfiddle/yE9qU/
output:
- DOMContentLoaded
- imgLoaded
- imgLoaded <----- wrong
- DOMContentLoaded
also putting the onload event directly on the image does not work.
http://jsfiddle/yE9qU/1/
output:
- 10 10
- 10 10
- 16 16 <----- wrong
- 10 10
This means that there is no way to get the right css assigned size before everything loads... so after window.onload
Solutions...
depends on what you need.
if there are not to many images i would add them after executing
loadorDOMContentLoaded.like you say putting the script at the bottom of the page. but not so sure if image is already cached.
a. do the math after everything has loaded (it's just some milliseconds)
b. hide the images until math is done.
If you explain exactly why you need the size of the images in that exact moment it's easier for us to find you a proper alternative solution.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745160571a4614371.html
评论列表（0条）