Cross Fade Image Gallery Messy On First Load

[Curtis Thompson]

hello…

short answer is yes you can get around that, but the longer answer would require seeing your code in action to see what is missing and how it could be fixed in your specific situation.

can you post an example of your gallery?

sitruc

[Simon Matthews]

Hi,

Thanks for replying.

Here is a link to one of my websites. It’s not the one I’m working on now but it uses exactly the same code for the image gallery, though I’m using larger images on my current project, which makes the issue stand out more. The JavaScript can be found right at the bottom and the list of images can be found nearer to the top.

Thanks,

Simon.

https://www.triangledesignandmedia.co.uk/

[Curtis Thompson]

hello…

i can’t reproduce the issue, but after looking around, it seems like you have a js call to an “infinite carousel” library in your head that results in a 404, so clearly you weren’t using that – i see after googling that you are using this one:

https://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

look at the questions posted for it – i think question #18 is your issue, yes?

sitruc

[Simon Matthews]

Hi,

Thanks for pointing out the unused JS call. My code tends to get a bit scruffy after trying different things out. Sometimes I leave things in if I’m not sure what they are doing, but I didn’t realize it would be a problem. I’ll try to be neater in the future.

Yes I think that’s the one I’m using. Well spotted with question number 18! Though this fix somehow doesn’t work for me. When I load the page up after clearing the cache I still see the images loading up, and I briefly see the underlying images, which makes it look a bit untidy. It does happen with the link I sent you but not so much as with my current project, probably because the images are larger. You actually told me about the issue with my site when I first made it a few months back – you were advising me to use less images in my gallery because you could see them loading up one on top of the other. It’s not very noticeable with that site mind, but it does spoil my new project somewhat.

Thanks for taking the time to reply,

Simon.

[Curtis Thompson]

hello…

best thing i can suggest is to extract out just a snippet of code into a separate test page that just is the gallery script. you can even use random sample images from other servers – just something big. then play around just on that sandbox page with the css and other settings to see if you can get rid of it or otherwise stop it from happening…

always easier to just isolate a specific issue and work on it separately. if you want to post that page once you get it done, we can look at it there and try some other options.

sitruc

[Simon Matthews]

Okay, thanks, will do that and get back to you! 🙂

[Simon Matthews]

Hi,

Tried the image gallery on a page of its own. The only problem is, the gallery now appears too quickly to be able to see whether or not the image preload code is effective, although at a guess I’d say the images are still appearing line by line down the page instead of smoothly – except it’s so fast you can’t really see in the test – both with and without the preload code.

I’m assuming it isn’t effective as the code is identical to the original code in my web page, and is also identical to the code on the tutorial page, other than the names of the divs. I’ve tested it over and over with an empty cache and sometimes you can see the underlying images for a brief moment as the page is loading. With my current project, one of the images contains a logo with bright pink text. This stands out a lot as the images are loading. You can’t always see it, but sometimes you can. If the preload code worked then I’m assuming this should never happen.

Simon.

[Simon Matthews]

Ah, I’m thinking that the #18 fix doesn’t actually preload the images, it just hides the other images until the first one is loaded onto the screen. I also just noticed an extra line of code in the #18 fix that wasn’t present in the fix I found on another forum, so I was wrong to say the code was identical. I have now added that extra line of code, which is thus: $(window).load(function(){

The first image is still loading up slowly down the page but I’m not sure if the other images can be seen whilst this is happening. I tested it lots of times yesterday with the underlying images not showing for ages and then suddenly showing, so I’ll have to keep an eye on it to see if it works.

I’d still like to know of a way to actually preload the images before anything starts displaying on the page though, so that I don’t get that line-by-line loading of the image. Just to make the page loading look neater.

Thanks,

Simon.

[Curtis Thompson]

hello…

you can preload easily with jquery (well – with javascript…this is just jquery syntax):

https://stackoverflow.com/questions/476679/preloading-images-with-jquery

try that out…remember also that you can do your sandobx page with any graphics – find ones that are as huge as possible – you can of course force dimensions on them to make them fit, but that won’t make them smaller filesize-wise…so go get some giant pictures of space or something from nasa and use those for testing… 🙂

sitruc

[Simon Matthews]

Hi, sorry for the slow reply, been making alterations to my site and lost track of time!

Thanks for the preload link, will give that a try. Does all of the JavaScript go in the head or does some of it go in the body? I’m guessing the top JavaScript (not jQuery) in the green ticked reply needs tags?

Thanks,

Simon.