/    Sign up×
Community /Pin to ProfileBookmark

preload images with PHP?

Copy linkTweet thisAlerts:
Mar 13.2007

hello all, i’ve got a photo gallery that works but seems to load the pics slowly and in safari it’s not even loading the “big” pic when you roll over its thumbnail – you have to rollover, rollout, then back on to get it display ?

so i’m trying to preload the large images by creating an array to store them in. this is how i’m creating the array:

[CODE]
$bigPhoto=array(“images/gallery/bigs_$req_gall_num/1.jpg”);
for ($b=2;$b<($tot_pics+1);$b++){

array_push($bigPhoto, “images/gallery/bigs_$req_gall_num/”.$b.”.jpg”);
}
[/CODE]

i’m printing the line below but instead of printing “$bigPhoto($i)” it just prints “Array($i)” and i don’t know why. if print the array using print_r i can see all the correct images and indices but a regular print isn’t doing jack.

[CODE]
onMouseOver=”document.getElementById(‘big_pics’).src=eval($bigPhoto($i)));”
[/CODE]

i’m sure i’m over looking something elementary. pretty sure there’s probably a better way to do all this period but i haven’t been able to find any pure PHP preloader tuts 😮

thanks!

to post a comment
PHP

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@bokehMar 13.2007 — How many "big" photos are there per page and how big are they in dimmension and kiloBytes.
Copy linkTweet thisAlerts:
@kreddauthorMar 13.2007 — all the images are counted and pulled from the server dynamically with php...so there's no set number.
Copy linkTweet thisAlerts:
@kreddauthorMar 13.2007 — oh and the "big" photos shouldn't be too big but i'm not sure...shouldn't be more than 30-40k but being a photography site i was more lenient with the file size
Copy linkTweet thisAlerts:
@kreddauthorMar 15.2007 — **bump**



bueller?.....bueller?.....bueller?
Copy linkTweet thisAlerts:
@bokehMar 15.2007 — If you want to pre-request images you will need to use Javascript.
Copy linkTweet thisAlerts:
@kreddauthorMar 15.2007 — ok, used php and javascript together...works in IE7 and FF2 but haven't had a chance to test in SAFARI, which was the problem-causer in the first place.

a stripped down version of my code, if anyone is interested...


[CODE]
$img = "img";
$src = "src";

print("<script language="JavaScript" type="text/javascript">n");

for ($b=1;$b<($tot_pics+1);$b++){ $tot_pics is var set earlier when PHP counted total thumbnails
print("$img$b = new Image();n");
print("$img$b.$src = "images/gallery/bigs_$req_gall_num/$b.jpg";n");
}

print("

function big_pic(state,gallery,pic,w,h){

newpic = "img" + pic; <!-- replaces img + b vars -->

if (state == "block"){

**other code stuff**

document.getElementById("big_pics").src=eval(newpic+".src");

} else {

**blah blah**

}
}
</script>

");
[/CODE]


using javascript, since you can specify img1.src, can you specify img1.width or img1.height as well??
Copy linkTweet thisAlerts:
@pclion324Jun 02.2009 — You can specify image width and height that way. Just remember to only assign numbers.
img1.height = "90";
img1.width = "160";

You can also change the css height and width using javascript. However you should specify units when accessing css dimensions through javascript.
img1.style.height = "90px";
img1.style.width = "160px";
Copy linkTweet thisAlerts:
@ebarJun 02.2009 — nope javascript is the best for preloading scripts into a page....
Copy linkTweet thisAlerts:
@ebarJun 02.2009 — You can specify image width and height that way. Just remember to only assign numbers.
img1.height = "90";
img1.width = "160";You can also change the css height and width using javascript. However you should specify units when accessing css dimensions through javascript.
img1.style.height = "90px";
img1.style.width = "160px";[/quote]
That is fine if your images are the same each time... if you are going to be changing the pictures you do not want to do it that way. what u will want to do is something like lightbox uses.. in order to get a &#37; of the size of the picture so they all are basically blown up the same % or whatever.. no matter what the pic is (Javascript would be best for that...i would think)
×

Success!

Help @kredd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...