...

View Full Version : Need image loading/PreLoading code Please!



yeiya
12-29-2010, 06:23 PM
Hi!
i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images.

I preload all the images when the page loads:

HTML: <body onload = "lodpic()">

JAVASCRIPT:

function lodpic()
{
for(i=0; i<=199; i++) {
LODImage = new Image();
LODImage.src = picture[i];
}
}

The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded.

I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos.

In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly.

Or if there are other approaches, it would be really helpful.

Thank you!

Sciliano
12-29-2010, 07:38 PM
I don't believe it's practical to use "next" and "previous" buttons/links with 200+ images.

Since you already use an image array, try this instead:

Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size
Also save the attached images.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size */
/* Copyright 2009, Michael J. Hill. All rights reserved. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as the above notice is kept intact */

var imgPath = "./images/";

var dynamicImage = []; // file | width | height;
dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";

/* Do not edit below this line */

var loadingImageSrc = imgPath + "loading.gif";
loadingImage = document.createElement('img');
loadingImage.src = loadingImageSrc;
var grandLoadingGIF = document.createElement('img');
grandLoadingGIF.src = imgPath + "grand_loading.gif";
var sWidth = screen.width;
var sHeight = screen.height;
var fullSizePct = "";
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;

function displayFull(){

var nV = document.documentElement.scrollTop;
var origWidth = popImg.width;
popImg.width = Math.round(origWidth * fullSizePct);
popDiv.style.left = Math.round((sWidth - popImg.width)/2) + "px";
popDiv.style.top = Math.round(((sHeight - popImg.height)/4) - (30 * fullSizePct)) + nV + "px";
}

function openFullSize(nSrc){

while (popDiv.lastChild)
{
popDiv.removeChild(popDiv.lastChild);
popDiv.style.top = "-10000px";
}
popImg = document.createElement("img");
!IE ? popImg.style.marginBottom = "-4px" : null;
popImg.alt = "Click to close";
popImg.title = "Click to close";
popDiv.appendChild(popImg);
nBody.appendChild(popDiv);
popImg.src = nSrc;
nShadow.style.width = document.documentElement.clientWidth + "px";
nShadow.style.height = document.documentElement.scrollHeight >= document.documentElement.clientHeight ? document.documentElement.scrollHeight + "px"
: document.documentElement.clientHeight + "px";
nShadow.style.display = "";
grandLoadingGIF.style.top = (document.documentElement.clientHeight / 2) - 16
+ document.documentElement.scrollTop + "px";
grandLoadingGIF.style.left = (document.documentElement.clientWidth / 2) - 16 + "px";
grandLoadingGIF.style.display = "";
setTimeout("displayFull()", 900);
popDiv.onclick = function()
{
nShadow.style.display = "none";
grandLoadingGIF.style.display = "none";
this.style.top = "-10000px";
while (popDiv.lastChild)
{
popDiv.removeChild(popDiv.lastChild)
}
}
}

function brushIn(nStaticImg){

var nOpacity = 0;
var nInterval = setInterval(function()
{
nOpacity < 100 ? nOpacity = nOpacity + 2 : clearInterval(nInterval);
IE ? nStaticImg.style.filter = "alpha(opacity = "+nOpacity+")"
: nStaticImg.style.opacity = (nOpacity / 100);
}, 25);
IE ? nStaticImg.detachEvent('onload', brushIn, false) : nStaticImg.removeEventListener('load', brushIn, false);
}

function init(){

var nLoadImg = "";
var nWrapper = "";
var imageArchive = [];
var nStaticImg = [];
var nDiv = document.getElementsByTagName('div');
for (i=0; i<nDiv.length; i++)
{
if (nDiv[i].className == "imgContainer")
{
var nContainer = nDiv[i];
}
}
fullSizePct = (nContainer.title.replace(/%/, "") / 100).toFixed(2);
nContainer.title = "Click Image to Enlarge";
var dynImgInfo = "";
for (i=0; i<dynamicImage.length; i++)
{
dynImgInfo = dynamicImage[i].split("|");
imageArchive[imageArchive.length] = [dynImgInfo[0], dynImgInfo[1], dynImgInfo[2]];
nStaticImg[nStaticImg.length] = document.createElement('img');
}
nContainer.style.visibility = "visible";
for (i=0; i<dynamicImage.length; i++)
{
nLoadImg = document.createElement('img');
nLoadImg.style.position = "absolute";
nLoadImg.style.backgroundColor = "#90ee90";
nLoadImg.alt = "";
nLoadImg.src = loadingImage.src;
nStaticImg[i].onload = function()
{
brushIn(this);
}
nStaticImg[i].src = imgPath + imageArchive[i][0];
IE ? nStaticImg[i].style.filter = "alpha(opacity = 0)" : nStaticImg[i].style.opacity = 0;
imageArchive[i][2] >= nContainer.clientHeight - 15
? imageArchive[i][2] = nContainer.clientHeight - 15
: imageArchive[i][2];
nStaticImg[i].height = imageArchive[i][2];
nStaticImg[i].width = imageArchive[i][1];
nStaticImg[i].style.position = "relative";
nStaticImg[i].style.cursor = "pointer";
nStaticImg[i].style.marginBottom = nContainer.clientHeight - imageArchive[i][2] - 12 + "px";
nStaticImg[i].onclick = function()
{
openFullSize(this.src);
}
nLoadImg.style.top = (imageArchive[i][2] / 2) - 12 + "px";
nLoadImg.style.left = (imageArchive[i][1] / 2) - 12 + "px";
nWrapper = document.createElement('div');
IE ? nWrapper.style.styleFloat = "left" : nWrapper.style.cssFloat = "left";
nWrapper.style.position = "relative";
nWrapper.style.paddingRight = "5px";
nWrapper.appendChild(nLoadImg);
nWrapper.appendChild(nStaticImg[i]);
nContainer.appendChild(nWrapper);
nBody = document.getElementsByTagName("body")[0];
popDiv = document.createElement('div');
popDiv.style.position = "absolute";
popDiv.style.top = "-10000px";
popDiv.style.cursor = "pointer";
popDiv.style.border = "1px solid black";
nShadow = document.createElement('div');
nShadow.style.backgroundColor = "#808080";
nShadow.style.position = "absolute";
nShadow.style.top = "0px";
nShadow.style.left = "0px";
nShadow.style.display = "none";
IE ? nShadow.style.filter = "alpha(opacity = 75)" : nShadow.style.opacity = .75;
nBody.appendChild(nShadow);
nBody.appendChild(grandLoadingGIF);
grandLoadingGIF.style.display = "none";
grandLoadingGIF.style.position = "absolute";
grandLoadingGIF.style.backgroundColor = "#90ee90";
}
}

IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {margin-top: 200px;}
.imgContainer {position: relative; visibility: hidden; border: 1px solid black;
width: 800px; height: 225px; background-color: #f0fff0; margin-left: auto;
margin-right: auto; padding-left: 3px; overflow: auto; padding-bottom: 5px;}
.imgContainer img {margin-top: 3px; margin-bottom: 3px; border: 1px solid blue;}

</style>
</head>
<body>
<!-- title = the size at which the "full size" images will be displayed. -->
<div class="imgContainer" title="90%"></div>

</body>
</html>

yeiya
12-29-2010, 10:21 PM
Thank You for your reply.

But is there anyway to give the "loading priority" to the user clicked image first while other images are still loading? I mean I want the user to be able to click 81th image out of 200, while all the images are loading, but the 81th image must get the "loading priority" (load 81th first before the "still loading" images, if the 81th image is not loaded already) for fast loading. But I still want other images to load in the background for faster experience.

=/

yeiya
12-30-2010, 07:58 PM
Anyone? Or am I trying something that's not possible? :S

gusblake
12-30-2010, 09:00 PM
You could move the onload to the tag of the current image:



<img src="current_image" onload="lodpic()">


Or you could only preload the two images either side of the current image in the sequence, so going from 5 to 6 is quick but 5 to 34 not.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum