[Curtis Thompson]

hello…

[Simon Matthews] “There’s either a way or there isn’t. If possible I’d like to know if there is and thought you might be able to tell me.”

there is a way – i didn’t look at his code specifically but being a javascript programmer for years now, i can tell you that there’s a way to either (a) alter his simple example or (b) just write your own…in all likelihood it would be the addition of a mixture of css and a simple js loop to check if the image is loaded and show it when it is. could even be pure css – again i didn’t get too far into his example.

in your case, however, since learning javascript is not a focus right now, i’d suggest that you just leverage an existing plugin for this functionality (all the plugin will be is the same thing but with some wrapper and additional functionality around it that insulates you from the guts of the thing) – there are a million of them that would do just fine. i think his was just a case of writing a simple example that didn’t require the overhead of a plugin, but at that level you have to know the code.

this one in particular is very easy to use – give it a shot!

https://jquery.malsup.com/cycle/

sitruc

[Curtis Thompson]

hello…

[Simon Matthews] “Well yes, compressing the images will make them load faster onto the screen but still not fast enough to eliminate seeing them load up down the screen I don’t think”

have you verified this? it’s why i suggested creating a single simple page that only does this image cycler, and also do it using final production-size images. if it still flickers, then you can work solely on it with additional css and javascript tricks to get it working. that said, his basic demo:

https://www.simonbattersby.com/demos/crossfade_demo_basic.htm

has a few 80kb images and suffers no flicker issues. therefore, i’d guess that it’s also other stuff on your page – you have a ton of other images and all are png files that seem to average around 30kb – when i cleared my cache and ran firebug, it totaled 4mb (!) of images – you shouldn’t ideally be at more than 10% of that worst case. so you are probably having flickering because of the large volume of content (images) on the page. that’s why you should make a simple page loading final compressed images – if you don’t see it there, then you know it’s not the culprit.

wrt saving – save for web in photoshop is more than up to the task for saving web-ready image files – go with that…

sitruc

[Curtis Thompson]

hello…

i see your top preload is commented out yes. preload is typically used when you are trying to have a mouseover element or another bit of code that will show an image not otherwise loaded initially. after discovering the massive size of your images, i believe that i had misinterpreted your issue, and that a preload is probably not necessary because your images are all loaded in the div html code in the cycle at load time. therefore you can probably get rid of all preload.

however, we go back to a chicken/egg problem – you are trying to fix a problem where you have images flickering in the cycle, but you are using giant images that take several seconds to load. but then you mentioned here that they were just temp placement images until they were finalized…so in that sense, you are trying to fix a problem that won’t be a problem once you use the final properly sized images, yes?

try making them jpgs that are as small as possible wrt file size to see if it gets rid of your problem (after you also remove the preload)

sitruc

[Curtis Thompson]

hello…

any web page is going to be a top to bottom thing…so in terms of order of javascript and if it should be in a block – what’s above something else will happen first. how you set it up beyond that is layout preferences, although it is standard practice to group js code into blocks or an external file if it needs to be reused…

so here’s an example i made on jfiddle:

https://jsfiddle.net/sitruc/WhyGD/

you can see the order things are output in there. i added a wrinkle to it to make a point, which is the bar() function – because it is a function, even though it is above the document ready, it won’t be run until it’s called, which i do in the document ready block. you can play around with that to see the order of things to get a better feel for it.

however here, i think you can eliminate 99% of your load issues by simply reducing the file size of your slides – they are *HUGE* by web standards (500kb each!) – i saved one here as a 60 quality jpg out of save for web in photoshop and it looked just as good and was only 40kb – 90% file reduction. right now you are loading 6 images – assuming they are all like the first one and 500kb each, you’re loading 3mb of images, whereas reduced to jpgs, you could be loading 240k – so 6 images for half the file size of one of your current ones.

also – you are preloading them twice – once at the top of the page, and once at the bottom. you should remove one of those. but i’m betting if you make these 30-40kb jpgs, all your flickering you’re seeing will go away and you can get rid of both of the preloads…

sitruc

[Curtis Thompson]

hello…

well – raw javascript is loaded in the dom in the order received (so to speak). for years it was considered standard practice to put all your javascript in the head of the page, but lately the more correct way is to put it right at the foot of the page before the end body tag, but it’s not something that is written in stone. where you put a script block technically makes no difference, and it was/is put in the head primarily just to keep the body clean…but there is a valid argument for having it load last on a page behind everything else.

here’s a good summary of this:

https://elegantcode.com/2010/03/30/your-javascript-goes-where/

one thing to note – if you have something in a document ready or a window load block, that will not happen as it is found, but rather after either the document (dom) is ready or the window is fully loaded. it’s a subtle difference, but technically window load comes after that. but if you have something in one of those blocks, no matter where they are in the page, they will happen then and not as they are discovered during loading.

does that help clear it up a bit?

sitruc

[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

[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

[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

[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

[Curtis Thompson]

hello…

unfortunately all i see is this:

6681_cbvs.jpg.zip

it looks like you have some layout issues? also, it consistently takes about 30 seconds to even load that before i see _anything_, so i think you have some very large files in there…but it’s hard to tell with it looking as it is there… :-/

sitruc