Hey guys i can't seem to get lazyload to work at all on my page, and i can't understand why. I've looked around alot and still have no idea.
I need it as im desinging a new page for my band www.childrenoftheson.com/newindex/Newtest.html and since the whole site is run off one page i need to lazyload images to speed it up.
I would also love to know if anyone could point my in the right direction for lazyloading widgets.
Any help/rage is appreciated :D.
try pointing lazy load to the correct web path:
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
plus loading this way will mean your users might have already downloaded the file and thus saving them time on their page load.
To me it seems that the file which contains the jquery plugin (jquery.lazyload.js) cannot be found on your server. It seems to be located at http://www.childrenoftheson.com/jquery.lazyload.js. In your source code you are including it like this:
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
which resolves the wrong path.
If you are using Firefox, you maybe want to look at the 'Net'-Tab of Firebug to see which files cannot be found/loaded...
Related
I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.
You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>
Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js
I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!
I'm not a coder by trade but I find it really fun making and continually tinkering with my own website. I'm pretty happy with it but having so many hidden modules that slide up on click causes the whole site to not really function until they all load. Any suggestions for how I might keep them from loading until the main graphics load or suggestions/resources on what a better way to build this might be? Appreciate any help you might be able to provide!
http://www.ohkamp.com
If you have javascript modules, try to load them in the end of your html markup
e.g.
<body>
.....
......
<script src="{your_script_file_path}"></script>
</body>
I will start with admitting that although I have been researching, reading, and trouble-shooting my issue I think I am missing something fundamental with my site. I apologize for my ignorance in advance but this is the only way to learn--by admitting you don't know what to do.
I'm running a VB.NET site which has a master page and content pages. I am still very much in development of the entire site trying to add features.
What I'd like to do:
I would like to add google analytics and jquery magnific popup. I've followed all the instructions from google and from magnific pop-up and I'm still having issues.
What I've done to try and make this work so far:
My head on masterpage:
<script src="Scripts/googleanalytics.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-magnific-popup.js" type="text/javascript"></script>
My footer on masterpage:
<script type="text/javascript">
$('.test-popup-link').magnificPopup({type: 'image'});
</script>
Added class to image:
<a class="test-popup-link" href="img/bigdog.jpg"><img class="centerimg" src="img/smalldog.jpg" /></a>
My issues:
Google script fails to find script. It's definitely there, it was
copy/pasted directly from google's site into a file I am calling.
jquery and magnific pop-up only load on my root pages.
"/products/product1.aspx" pages for example refuse to load scripts.
Although they load on root pages, the script does not appear to work
for the image pop up. I've followed magnific-popup's instructions word for word for "initializing in html"
Instructions for magnific-popup: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Lastly, before I tried adding the image pop-up google analytics appeared to be working as I was getting reporting on the web analytics page.
Any help would be appreciated.
Solution found via talking it out on IRC.
I restarted my local server and it worked on my root directory. Race conditions or caching causing the problem?
I needed to add "/" before "Scripts" in my head which fixed non-root script loading.
Thanks to robert on freenode for talking me through it. :D
I would greatly appreciate it if someone could shed some insight onto a problem I'm having.
The code below is from the footer of a WordPress website I run, and as you'll notice, the second script is invalid. I have no idea where that even came from or how to fix it, and I've searched through many WordPress PHP files (footer.php, index.php, page.php, etc.) to try to find the source, but I'm not sure where it is.
So my question is this: could someone tell me how to find the source of this script? In other words, how can I find out where that second line of code even comes from? I'm not a developer, so sorry if this is a dumb question. Here's the code for you to reference:
<script defer="defer" src="http://echidnainc.com/wp-includes/js/admin-bar.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/easy-social-share-buttons.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/essb-sticky-sidebar.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-slide-in/optin-forms-manager/js/placeholder.js" type="text/javascript"></script>
So to answer the general question I posed, to find the source of a line of code placed in the footer of a WordPress page, the first thing to try should probably be the one-by-one deactivation of plugins until the script disappears (and obviously, when the script disappears, then you know the last plugin to be deactivated was responsible). That worked for me.
And now for details on my specific situation's resolution:
A plugin, Speed Booster Pack, was causing the erroneous script:
<script defer=”defer” src=”http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js” type=”text/javascript”></script>
Either that erroneous script or another element of the Speed Booster Pack was interfering with another plugin I recently installed. I tried tweaking some PHP files in the Speed Booster Pack, but ultimately I just deactivated the plugin in order to solve the problem.
I browsed to each of the scripts you mentioned in your post (just pasted the link into my browser to see the JavaScript source). It doesn't seem to be any of those scripts that are adding the tag to Google's hosted version of jQuery.
My suggestion, without knowing the source of the plugins you have in your wordpress, is that one of the plugins is trying to include jQuery, and has an error.
As to why the scripts are loaded at the end of the page, this is a combination of the "defer" tag, combined with a common web development trick that placing tags at the end of the page body facilitates faster load times.
If you could refer to the source code for any of the plugins I don't mind checking to see which one, if any, have the typo. You yourself could attempt to remove plugins one by one to see if one causes the script tag to disappear, and boom, culprit.
The second script is invalid, because the url in the src="..." arrtibute is invalid. I assume you wanted to use jQuery, a JavaScript libary.
To fix that replace
src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"with src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"
The jQuery libary hosted by Google.
I'm trying to setup a very basic jQuery image gallery.
You can see my attempts here: http://training.customstudio.co.uk/portfolio/detail/ee_project_four
I've duplicated the code from another site we created, have changed all the relevant div reference, but can't for the life of me get it working.
The images seem to be loading, but the jQuery effects not working.
Hopefully one of you guys can see the problem.
Thanks in advance,
Tom Perkins
This question is beyond simple.
Check in your head tag and find this..
<script type="text/javascript" src="-/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="-/js/jquery-1.4.3.min.js"></script>
Correct them because they do not refer to actual javascript files but Html files