Search code examples
javascriptjqueryhtmldeferred-loading

working with defer

I have used defer for my project (to pass google page speed test) enter image description here

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

enter image description here

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

Solution

  • 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.