This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 3 - Pages: 1 - Last Post: 4 May 21, 22:38 Last Post By: ctwist Threads: [ Previous | Next ]
AndreWolff

Posts: 1,998
Registered: 14-Dec-2007
How a skin can pre-load images?
Posted: 4 May 21, 17:43
 
  Click to reply to this thread Reply
Well Chris my old Slide Show 4 skin needs a better preloading algorithm , so if you have a good method, please let me know.

And what is the best way to measure these loading times?
ctwist

Posts: 628
Registered: 27-Sep-2003
Re: How a skin can pre-load images?
Posted: 4 May 21, 19:14   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
I assume that there are a few techniques for preloading images. This is the one that I use.

1) The imagesloaded JavaScript is available at https://imagesloaded.desandro.com. This offers a few options for installing it. I downloaded imagesloaded.pkgd.min.js (6kb) into the skin's res directory.

2) In each slide page, add the JavaScript.
<script src="${resPath}/imagesloaded.pkgd.min.js"></script>
3) Create scripts in slide.js.

Pre-load the images
function fPreload(pPreloadList)
{	if (pPreloadList)
	{ pPreloadList.forEach
			( function (item, i, array)
				{ vImages[i] = new Image();
					vImages[i].src = item;
			  }
			);
	}
}

Initialisation after the page is loaded
function fOnLoad(pCurrPreloadList, pExtPreloadList)
{ fPreload(pCurrPreloadList);
  fPreload(pExtPreloadList);
}
Add other page initialisation between the two "fPreload" statements.

4) Add this to each slide page's body tag.
<body onload="fOnLoad(<image1.jpg>, <'Duplicate.jpg','../thumbs/Duplicatev_.jpg','../thumbs/Duplicate_3_v_.jpg','../thumbs/Duplicate_2_v_.jpg','../Avalon%20River%20Cruise.pdf'>);">
Change each < and > bracket to square brackets. If I enter square brackets, the code sample disappears when I post the message!!!

There are two lists of images; these are created by slide.htt. The first list contains images on the current page that are not loaded initially; you may not need this. The second list contains all the images in the next and previous slide pages. You can preload videos as well, but I don't do this because the user may not want to watch the video, so it could be wasted bandwidth. I list the images in the order that I want them to be loaded. It doesn't matter if you preload an image twice; if it is already cached, it won't be downloaded again. My example doesn't preload buttons; maybe it should.

5) You can verify that this is effective.
Test some album pages that you have opened recently. You may want to clear the web browser's cache first.
  • Open a slide page. Wait a few seconds. Click "next". The next slide page should appear immediately.
  • Open a slide page. As soon as the "next" button appears, click it. There will be a lag before the page opens.

Edited by: ctwist on 4 May 2021, 13:14
This message got scrambled when I posted it. Some of the text disappeared. It looked good when I previewed it!
I am investigating.

Edited by: ctwist on 4 May 2021, 13:42
The original message was completely messed up. I have recreated it. Let's hope it gets posted correctly this time.

Edited by: ctwist on 4 May 2021, 13:47
AndreWolff

Posts: 1,998
Registered: 14-Dec-2007
Re: How a skin can pre-load images?
Posted: 4 May 21, 22:25   in response to: ctwist in response to: ctwist
 
  Click to reply to this thread Reply
Thanks for your fast response Chris.

All my skins are single html page skins who don’t use a slide page, so I am not sure I can use this method.
ctwist

Posts: 628
Registered: 27-Sep-2003
Re: How a skin can pre-load images?
Posted: 4 May 21, 22:38   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
The technique should be very similar. You just need to decide where to put the code.
  • I use slide.js. You probably use a JavaScript file that has a different name.
  • Call fOnLoad immediately after you load a new image.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums