Independent image loading script


(Trey Yancy) #1

I have an elaborate responsive project that functions like a ship-in-a-bottle website that our dealers can easily deploy on their websites.
This includes a photo gallery that would cause a load time hit. I do not need the gallery scene to preload from the get-go, but I would like to prompt the loading of the gallery images while the visitor is viewing the first scene. Is there a script that would work for this?


(Mark Hunte) #2

Hi some of the gallery examples on the forum load the images using Javascript.
Possibly extracts from these will do what you want but it does depend on how you will be wanting the “prompt” to work.

Can you elaborate on this. i.e
scene loads. user clicks something. or
scene loads, after #number of seconds javascript runs to load images… or

scene loads, user navigates to a waypoint which starts a JS to load the images…


(Trey Yancy) #3

Hi Mark. Thanks for the response.
As the scenes are designed to be viewed arbitrarily via menu, one can’t predict when the right time to load the gallery images, but I would tend to load them upon scene load of the first scene.


(Mark Hunte) #4

Ok so when scene 1 is completely loaded.
I should have asked is the gallery on another scene. Which may pose a problem as scene 2 elements may not exist in the DOM until the scene 2 loads

Also my assumption is that the images will be loaded externally from the hype resources


#5

Have you turned off the checkbox for preload (for each of your images) in the resources pane?

If you call a script on scene load along the lines of this:

images = [];
function preload() {
    for (i=0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

preload (
          "${resourcesFolderName}/.....",
          "${resourcesFolderName}..." etc...
);

then that might work. I must admit I’ve not tested this, Iv’e just thrown this out there :wink: when I get a bit more time I’ll look into it more :slight_smile:


(Mark Hunte) #6

I think what will help is if we can see what you are doing at the mo and it’s setup.
As I say above trying to load images to a scene that has not loaded will be a problem, the scene needs to load at least once will in most cases first.

I have existing code that can load images from an external folder or from hype at any given time or action. But without knowing the above and the structure of your gallery we can only guest at a solution…


#7

True but if you implement my idea above you are loading them in to cache and then they will be served from that when you go to the scene.

Look at this example:

https://dl.dropboxusercontent.com/spa/wkk989fyyvlf2kz/Exports/imagePreload/imagePreload.html

notice on first load the first scene is shown but the time to load is still going. The images are being downloaded. I purposely put large images in this example to enable you to look into the console and the resources to see them being loaded into cache.

Also @TYancy, If you use Mark’s idea of loading images from a folder this will help if you have images that will be added later or not by you or by people who don’t understand the code. If you get my meaning.


(Trey Yancy) #8

Thanks guys. I will get on this shortly - I’ve got a three-man workload with an employer who has never been persuaded to hire the other two guys.

The project is intended as a ship-in-a-bottle item to be placed on the websites of our dealers. Attached is what I have at the moment. The responsive aspect is creating lots of “fun” in making various page elements work, but you can see where I’m headed. At the moment the gallery is nothing more than a scene with nav and background, waiting for content.

CustomHTML5Minisite.hype.zip (1.1 MB)

I’ve done something similar with page three (“gallery info”) of the following website: mobile.lightbenders.com. As you can see, this site is very heavy with Hype and loading is slow. Once I get the gallery thing worked out I’ll need to work on doing similar things with my Lightbenders sites. (I might be willing to hire someone for Hype optimization on the site.)

If a slide show could be coded for the project at hand that would would pull whatever images are placed in a folder within a Hype resource folder and work for a responsive page, that would be great.


#9

Hi Trey!


You might find something along the lines You are looking for here: http://forums.tumult.com/t/image-gallery-with-dynamically-loaded-images-from-folder/5591

@DBear @MarkHunte provide the examples.


(Trey Yancy) #10

Thanks. I saw it. The thumbnail approach is a hard sell for a low resolution smartphone. I’ll modify what I did for a previous site. I’d like to be able to be able to cycle through whatever photos are placed in an external folder.

A couple of years ago I found a nice jQuery gallery and passed it along to our back-end guy. He set up a folder on the server in which I put together numbered photos and a text file with a list bearing corresponding numbers. All I have to do is open the aliased folder on my desktop, swap out the photos and edit the captions in the text file, and the server automatic updates things every night.


(Mark Hunte) #11

If I remember when I get in I will post up the gallery you can do this with ( Not the text caption)

You will probably want to adapt the UI but it should not be too hard. I have also made it a symbol so you can pull it straight into a project and work on it.


(Trey Yancy) #12

You rule.


#13

updated my original post with the resources for you to poke around and look at.


Edit on the run
(Mark Hunte) #14

Here is the Gallery.

As I said I have made it into a symbol.

You should be able to change the look as to need. To use as is you Must add Jquery, Have scale scene width and height checked on. And pin top and sides to edge. I would also not put the symbol at the very top of the scene or the expanding box will clip.

You click on the images to expand and a click on the expanded image to shrink back.
A rudimentary slide show. and arrow buttons to nav.

The images can be place in a folder named images which needs to be place on the same level as the exported html project.

The slideshow and expand should be easy enough to disable if you need to do so.

I may when I get a min put a config in to do this with a true or false setting in the project.

galleryExpand_Must_Add_QUERY.hypesymbol.zip (30.3 KB)