{"id":677,"date":"2014-08-31T08:47:46","date_gmt":"2014-08-31T08:47:46","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=677"},"modified":"2015-08-10T07:11:41","modified_gmt":"2015-08-10T07:11:41","slug":"wait-for-images-to-load-and-then-execute-all-other-code","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/wait-for-images-to-load-and-then-execute-all-other-code\/","title":{"rendered":"Wait for images to load and then execute all other code"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

So, my question<\/a>\u00a0was\u00a0as follows:<\/p>\n

What I want to do is: wait until all images are preloaded and only then execute all other javascript code. As far as I’m concerned it can (but not a must) have a “loading…” message.<\/p>\n

The fact is that I have a pretty big image in the body background and 2 other images which are also bigger, and so I would like to preload them so that then they would show instantly and would not have that ugly “loading” image effect.<\/p>\n

This is what I’m using now but it’s not good:<\/p>\n

$(document).ready(function()\r\n{    \r\n     preloadImages();\r\n     ...some other code...\r\n\r\n    function preloadImages(){\r\n         imagePreloader([\r\n            'images\/1.png',\r\n            'images\/2.jpg',\r\n            'images\/3.png',                \r\n         ]);\r\n     } \r\n\r\n     function imagePreloader(arrayOfImages) {\r\n         $(arrayOfImages).each(function(){\r\n             (new Image()).src = this;\r\n         });\r\n     }   \r\n}<\/pre>\n
I don’t know, maybe I should call this preloader somewhere out of the .ready()? or something like that?\u00a0Btw, yes, I also read\u00a0this<\/a>\u00a0post and I don’t know why but .ready() works faster for me.<\/p>\n
The answer, by user Kevin Ennis, was this:<\/p>\n
Instead of trying to preload, you could just execute your script on…<\/p>\n
window<\/span>.<\/span>onload <\/span>=<\/span>function<\/span>(){..}<\/span><\/code><\/pre>\n
That doesn’t fire until all images have been loaded.<\/p><\/blockquote>\n
My own solution was this:<\/p>\n
\n
Ok, so finally I got this thing to work. My problem? I was setting the waiting div wrong. This is my code now: I have the loading div which I show above everything and then when all images load (using $(window).load(function(){…}); as suggested I, hide that div.<\/p>\n
<div<\/span>id<\/span>=<\/span>\"loading\"<\/span>><\/span><div<\/span>id<\/span>=<\/span>\"waiting\"<\/span>><\/span><img<\/span>class<\/span>=<\/span>\"loadingGif\"<\/span>src<\/span>=<\/span>\"images\/loading.gif\"<\/span>><\/span><\/div><\/span><\/div><\/span>\r\n\r\n#loading\r\n{\r\n   background-size: 100%;\r\n   background-color:#000;\r\n   width: 100%;\r\n   height: 100%;\r\n   margin: 0px;\r\n   padding: 0px;\r\n   z-index:999;\r\n}  \r\n\r\n#waiting\r\n{\r\n   margin-left: auto;\r\n   margin-right: auto;    \r\n   position:absolute;\r\n   top: 39%;\r\n   left: 27.81%;\r\n   width: 45%;\r\n   height: 150px;    \r\n   background-color: #FFF;\r\n   border: 12px solid #FF771C;\r\n   text-align: center;\r\n}<\/span><\/code><\/pre>\n
And my jQuery code is this:<\/p>\n
$<\/span>(<\/span>window<\/span>).<\/span>load<\/span>(<\/span>function<\/span>()<\/span>{<\/span>    \r\n    $<\/span>(<\/span>'#loading'<\/span>).<\/span>addClass<\/span>(<\/span>'hidden'<\/span>);<\/span>...<\/span>}<\/span><\/code><\/pre>\n<\/blockquote>\n
Additionally, user Alex had a great answer too:<\/p>\n
I\u00a0\u00a0have a plugin named\u00a0waitForImages<\/a>\u00a0that lets you attach a callback when descendent images have loaded.<\/p>\n
In your case, if you wanted to wait for all assets to download,\u00a0$(window).load()<\/code>\u00a0may be fine. But you could do it a bit cooler with my plugin \ud83d\ude42<\/p>\n
var<\/span> loading <\/span>=<\/span> $<\/span>(<\/span>'#loading'<\/span>);<\/span>\r\n\r\n$<\/span>(<\/span>'body'<\/span>).<\/span>waitForImages<\/span>(<\/span>function<\/span>()<\/span>{<\/span>    \r\n    loading<\/span>.<\/span>addClass<\/span>(<\/span>'hidden'<\/span>);<\/span>},<\/span>function<\/span>(<\/span>loaded<\/span>,<\/span> total<\/span>)<\/span>{<\/span>\r\n    loading<\/span>.<\/span>html<\/span>(<\/span>loaded <\/span>+<\/span>' of '<\/span>+<\/span> total<\/span>);<\/span>});<\/span><\/code><\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/677\/revisions"}],"predecessor-version":[{"id":1714,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/677\/revisions\/1714"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}