On my index (home) page I have a container the contains an image element. I am hard coding this image and the image is loaded from the server when the page loads.
In comparison with the carousel construct a series of img objects are created (mySlides) and the controlling Javascript loops to display each image in turn. This means that all the image objects are created when the page loads and if I have a lot of images they are all loaded from the server.
I use this on my Church Crawler pages which some have a lot of images - Saxmundham is a case in point. Saxmundham had not had the image files moved when I tested this. Rushbrook has been moved.
What I want to do is create a data structure using JSON the contains the paths to the image files and to loop through the data structure and create image objects on the fly. That way the images are only loaded when they are displayed.
The loading of all the image objects is not as bad as I thought as the browser cache does not need to re-load the images if the slideshow repeats.
The JSON object
10 August 2026 - Page is getting to be a "dogs breakfast". Need to start a new page
Image on Load
Auto loaded Image will appear here
What I want to do is to have the image above load from a list of images.
I also want to be able to change the title, size and possibly the click action
Top
I don't want to use the onload() method as this would interfere with the keyhandler.
Making a search for how to use Javascript to load an image returned a few sugestions. There is a script below the uses an onload method that appends a child element img to the body element
Another example - using the create new Image() object
Image will appear here
Auto load - The image has been moved to the top of the page - as it would be on the index page.
