website on cleaning website not always loading - ideas?

Joined
12 Feb 2006
Posts
17,369
Location
Surrey
it happened at the time of when i was trying to get the google page speed up to 100 so changed how things loaded, and then after that point, the gallery on the pages aren't always loading, needing a random amount of refreshes to get it to work. i'm not saying it is because of the changes i made to improve page loading speed, but i imagine this is the cause.

hoping it's something straight forward.


you can view the gallery on the page above. if you check other pages it may be that the gallery isn't showing as there any any images there yet so better to use the link above as the one to see what i mean.

thanks
 
It's related to whatever javascript is responsible for setting the height on these elements. If you can find why it's not firing, you should be able to solve the problem.

s9xRqNs.png

If you load a page where the gallery isn't working, that inline height is set to 0, hiding the images.
Thanks. I've checked the page source via the console when the page loads with no images and you're right, but I think it's to do with when the script is called and decides to run and set the heights etc, as when I change the height to 100px it still isn't showing correctly, and then when I click the box, now the image loads.

Also tlif I don't have the images loading in, right click to inspect using the console, the images always then instantly display.
 
Aside from what Hutchy said, there are a couple of things I can see wrong in the source:
  • There is a <!DOCTYPE html> at the top, which means it's HTML 5, but then the following line is <html xmlns="http://www.w3.org/1999/xhtml"> which means it's XHTML. It can't be both. Given that XHTML is dead, the second line should just be <html>.
  • The meta tag with the charset attribute must be within the first 1024 bytes, but it's not. It's best to make it the first element inside the <head>.

Also the console in Firefox is complaing that "The byte stream was erroneous according to the character encoding that was declared. The character encoding declaration may be incorrect". This may be because of the previous point, or maybe your webserver is using the wrong encoding.
I've trmvoed the xmlns part. Let me know if it shows as an issue still. Thanks.
 
I would guess that it's firing the javascript before other stuff has loaded to make it work correctly.

Try something like this to run it after page load:
$(window).on('load', function() {
[...]
});

You've used 'defer' in the script tag but that's usually used for loading external scripts (like <script src="www.jquery.com/script.js" defer>). I don't know if it'll work having the defer tag on a local script?

I did that as Google wasn't happy until it was deferred.

The script is actually on a different domain, though it is the same server, the domain https://www.mayergroup.co.uk/ is where the files are stored essentially in folder grp/javascript/gallery.js, and then https://www.mayercleaning.co.uk/ accesses it by including it from the direct URL mayergroup.co.uk/javascript/gallery.js

I don't know a better way to do it, given the files the on the same server
 
Last edited:
I mean this code:
Code:
<script defer>
    $(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });
</script>
I assumed that this was the bit setting up the slideshow but I may be wrong.
i see. i've had a play with it and it stillhad the issue even with the defer removed, as i think it was due to the defering of the rest of the script needed.

any way, i have sorted it enough for my satisfaction by adding a "reload gallery" button which solves the issue if the script doesn't correctly fire when first loading. i had thought of adding a delay timer of say 3 seconds but will leave it as is for now and see what i think
 
Back
Top Bottom