working with defer

Question

I have used defer for my project (to pass google page speed test)

but my lazy plugin is not working as expect and this is my jquery lazy function to worked all lazy images

but all image is not loading how can be possible ?

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js" defer></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" defer></script>
<script src="js/plugin.js" defer></script>
<script src="js/main.js" defer onload="loadImages()"></script>

MY JS

function loadImages(){
  $(".lazy").lazy();
};

click to see demo page - when page loaded scroll down please

Where are you loading lazy load? It needs to be loaded after jquery. — sideroxylon, Dec 06 '16 at 08:05
@sideroxylon it is in top of the main.js and I called it with onload when page load — ani_css, Dec 06 '16 at 08:07
Check your console to see if jquery has loaded before the onload event. — sideroxylon, Dec 06 '16 at 08:11
I checked the timing in the network tab of the console, and main.js finishes loading before jquery.min.js — sideroxylon, Dec 06 '16 at 08:19
@sideroxylon and what I have to do ? if I change order of js my html won't work ? — ani_css, Dec 06 '16 at 08:22
Start by trying not deferring jquery and see if your timing is OK — sideroxylon, Dec 06 '16 at 08:27
I guess it works as expect but must work with defer and can be issue order of the js ? — ani_css, Dec 06 '16 at 08:37
no..I know it will work but the problem is defer..I gotta work with defer — ani_css, Dec 06 '16 at 08:40
Look at the answer [here](http://stackoverflow.com/questions/11803215/how-to-include-multiple-js-files-using-jquery-getscript-method) - defer jquery, then run a function to load the dependencies. — sideroxylon, Dec 06 '16 at 08:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129879/discussion-between-recruit-man-and-sideroxylon). — ani_css, Dec 06 '16 at 09:08

score 0 · Accepted Answer · answered Dec 06 '16 at 09:49

0

I think with defer, the scripts are loaded in parallel but executed in order. So, its possible that loadImages is called before its dependent scripts are loaded and executed.

If the call to loadImages is inside main.js then it will be called after all other deferred scripts before it are loaded & executed, and lazy loading should work.

Again, browser implementations vary.

answered Dec 06 '16 at 09:49

Bhabishya Kumar

731
3
7

and you say I gotta remove onload on my html right? – ani_css Dec 06 '16 at 11:37
yes. remove onload from your script tag. put the call to loadImages inside main.js. try it. – Bhabishya Kumar Dec 06 '16 at 12:26

working with defer

1 Answers1