JS loads images after page load and calculates space wrongly - javascript

I have a website (flamencosrosas.com), run with WP and the Gridly template. I've noticed the images will overlap on the very first page load. If I refresh the page it won't happen again. My colleague told me this happens because images are being loaded after the page loads, which is why the JS code is calculating the image height wrongly and why they overlap.
I know nothing about JS and am unable to solve this issue. Could someone possibly help, please?
Many thanks! :)

Related

Spring framework - View not fully loaded

I have a view in jsp that is being returned by the controller and some of its html is not loaded nor show up in the page. Also its contents dont appear if I inspect the page. Its like the html was just cut in half.
Could this be because of the size of the view? It has 962 lines and about 70% is js stuff. (I dont know exactly what happens behind scenes when the resources that are loaded from my code to the browser).
I dont think its any html or js error, I've already done some tests to check if that was the case. I also tried with two different browsers and the result was the same.
Here is the page cut in half:
Thanks in advance for any help!

Loading the full site and then displaying, allowing video content to fully download

I have been having a issue with my html5 videos not loading fully and therefore freezing/stuttering at times, I need to give them time to load and want to put together something that will stop the page from displaying until the page and content is fully loaded therefore allowing my videos enough time to download properly.
What is the best/simplest way to achieve this?
Someone suggested not starting automatic playback before the readyState reaches HAVE_ENOUGH_DATA (4) but not sure how to implement this.
I basically want to put a div around the site and not load that div until the site is fully ready to be seen...
Any help would be greatly appreciated! Thanks
I think you need this library to go with: http://thinkpixellab.com/pxloader/.
The site has samples and API documentation to start with.

Recall external JS files after page transition finish

I have tried to implement this kind of script (Page Transition): here
Everything is going fine as demo provided. But only 1 problem that I cant figure out is:
I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.
Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.
Can somebody give me a clue to solve this? What I have tried is using :
location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(
*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.
Please help & Many Thanks
for demo purpose and needs help : here
It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.
From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.
I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.

Adding Image after page load

So I read this, what seems to be a very good article on the topic title:
http://www.rodsdot.com/javascript/Remote-Scripting-Images-(No-Need-For-AJAX).asp
What I don't understand is why it works?
I am fine with my work (monkey see, monkey do)but I figured why not ask.
Thanks,
Mat
Instead of loading all the images, css, scripts, etc.. on page load. This lets you load some images after the page load, letting the crucial part loads first.
It decrease the Page Load time, because it continue to load in the background after the Page Load was completed.

Two of the same image displayed by thickbox gallery at once

I am having a problem where occasionally two of the same images will load up, one on top of the other so both are showing. This only happens on the first image that loads up and is very intermittent. Has anyone else run into this problem using thickbox? Does anyone know how to fix it? Thanks
I know this is an old question, but I had the same problem and just solved it.
We had multiple galleries on one page, all seperated by the rel='' tag to group them.
We ran into the "two images on first click" problem as well.
Our php code was not smart enough to realize it was including the javascript more than once. So by only including the .js files once on the page, the problem was solved.
Maybe this is not a solution for you but it worked for us so I thougt I'd share.

Categories

Resources