0

I am building a website with several javascript-libraries included. These are slippry.js and jquery.lazyload.js

Sometimes it works without any problems, but sometimes it doesn't. For some reason these external scripts cannot be addressed from the main script.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/slippry.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script src="js/script.js"></script>

It seems that sometimes it takes too long to load these scripts, zo my document.ready event is fired before slippry and lazyload is being loaded.

This is the error: Uncaught TypeError: jQuery(...).slippry is not a function

RobinV91NL
  • 37
  • 7
  • have a look at http://requirejs.org/ – Alex May 20 '15 at 07:43
  • 1
    *"It seems that sometimes it takes too long to load these scripts, zo my document.ready event is fired before slippry and lazyload is being loaded."* No. They may *fail*, but the `ready` event won't just randomly fire while the script load requests are outstanding. – T.J. Crowder May 20 '15 at 07:44
  • Scripts are loaded synchronously so this is not possible. Try to provide link where this behaviour can be checked – A. Wolff May 20 '15 at 07:44
  • by the way, the ready event fires when the dom has loaded, not when scripts have loaded... – Alex May 20 '15 at 07:46
  • @A.Wolff the link is http://machinevisionfilters.eu.testbyte.nl/ – RobinV91NL May 20 '15 at 07:48
  • @Alex is it possible to change the behaviour of the event? Would a simple setTimeout of 200 ms work? – RobinV91NL May 20 '15 at 07:49
  • @RobinV91NL Thx for the link. How can we replicate issue? And Alex was talking about window onload event (i guess) instead but since you are adding scripts tags before the document is loaded, these scripts are loaded synchronously so it shouldn't help in any way here – A. Wolff May 20 '15 at 07:50
  • @RobinV91NL I think you totaly misunderstand what is happening. You could use a `SetTimeout` within the `ready` event or use a `setInterval`, however this is dirty – Alex May 20 '15 at 07:50
  • @A.Wolff it sounds strange, but just click around. The slippry is loaded on the homepage (slider), the lazyload in the categorypages (blocks on the homepage or the top left links). When you click some categories and then back to the homepage, mostly the slider doesn't work. – RobinV91NL May 20 '15 at 07:52
  • @Alex both, setInterval and setTimeout, doesn't solve the problem. It's strange, normally I don't have these issues, only with this website. – RobinV91NL May 20 '15 at 07:58
  • It looks like you are including two versions of jQuery, so the lastest one (jQuery v1.7.2) overwrite all plugins set on the previous one (jQuery v1.10.2). Are you using any CMS? Not sure from where the jq 1.7.2 is included – A. Wolff May 20 '15 at 08:03
  • 1
    @A.Wolff I deleted the cookie-warning, that's the only completely external script, and now it works fine! Thanks! I think it adds some library-call in its code. Thank you for your idea and your help! – RobinV91NL May 20 '15 at 08:13
  • @RobinV91NL `I think it adds some library-call in its code` Ya, sounds like it – A. Wolff May 20 '15 at 08:15

1 Answers1

-1

For Slippry.js - Make sure it's called within $(document).ready()!

jQuery(document).ready(function(){
  jQuery('selector').slippry()
});

it is stated in their site.

jQuery - What are differences between $(document).ready and $(window).load?

Also, try considering the order and the minified versions of you scripts

Community
  • 1
  • 1
yesterdaysfoe
  • 768
  • 3
  • 7
  • 23