Preloading popup images

Fri Jan 03, 2014 4:56 pm

Hi all,
If your like me and like to use the external image loader then depending on the size of your images it may be a good idea to use some Java script to preload the images so they appear as soon as the popup is called.

An example where this comes in handy is popup preview images above hotspots.

Yes this is coding but not difficult to do.

Output your project with all your popup images.
Use a text editor and open the HTML page Object2VR or Pano2VR generates.

Move down the page until you see the close tag for the head section, your looking for </head>:

Code: Select all

			background-color:  rgba(255,255,255,0.5);
			}
		</style>	
	</head>
	<body>

What you need to do is add the pre load script which is:

Code: Select all

<script type="text/javascript">
<!--
image01= new Image()
image01.src="1.gif"
image02= new Image()
image02.src="3.gif"
//-->
</script>

So your page now looks like this:

Code: Select all

			background-color:  rgba(255,255,255,0.5);
			}
		</style>
        <script type="text/javascript">
            <!--
            image01= new Image()
            image01.src="1.gif"
            image02= new Image()
            image02.src="2.gif"
            //-->
            </script>
	</head>
	<body>

Now to add your images, you will see that all you have to do is add two new lines which you can just copy and paste for each image.
Example I have 3 thumbnail images, thumb_01.jpg to thumb_03.jpg in a subfolder call thumbnails.
So my code would look like this:

Code: Select all

<script type="text/javascript">
            <!--
            image01= new Image()
            image01.src="thumbnails/thumb_01.jpg"
            image02= new Image()
            image02.src="thumbnails/thumb_02.jpg"
            image03= new Image()
            image02.src="thumbnails/thumb_03.jpg"
            //-->
            </script>

Thats it, when you tour is opened the images listed here will be loaded in the browsers cache and can be displayed as soon as required.
Would not go to mad with this as don't forget some devices don't have much cache to play with.

Regards,
Hopki

Fri Jan 03, 2014 5:59 pm

Thank you Sir... this is interesting. Now just have to find the trigger code to us in the pano

Happy New Year !!!

Fri Jan 03, 2014 6:23 pm

Hi Dave,
No trigger, this puts all the images in the browser cache ready for you need to display them.
If you have a look at this tour you will see when you hover over the hotspots a preview of the next node pops up.
In this case the images are very small so not worth preloading but that said you can still see a slight delay when you first hover over the hotspots. The second time yo hover over its instant because it now loaded in the cache.
If the images were preloaded then there would be no delay at all on first hover.
Regards,
Hopki

Fri Jan 03, 2014 7:30 pm

Thank you for the show and tell pano. Mouse over the white hotspot and the small thumbnail popups up. Mouse off ... thumbnail hides. Cool idea. Thanks

Observation -
IE 11 .... pano initial load bar moves to 91% and stops while still being able to do all the functions in the panorama.
Chrome 30 loading bar completes and hides as expected. All pano and skin functions work properly.

soulbrother · Sun Jan 05, 2014 12:39 pm

Thanks Martin,
a good idea, it could be really interesting fpr my projects, I will give that a try, when I´ll find the time

happy new year !

best regards,
Dieter