Member Avatar for justted

Hello,

I am creating a website that requires a page to have over 100 small images (between 80x80px up to 100x100pxs in a gallery type interface. I will also need to have a hover over box with description for each box.

I am also considering using a mysql database to staore each of the images details incase I need to update it later. (Its a kinda of game for my family and friends).

As I said the page has 100 images plus the background and header. When Im at home on my broadband connection this loads fine. However, if I connect through my mobile phone when at work (not sure if thats even as fast as 56k dial up) then the page doesnt even load properly.

My questions are regarding how should I load this page? Ive been trying to find a script that loads page contents first and then loads an iframe afterwards as I thought if I put these images in an iframe then it may help with loading.

Also ... does anyone know which would be faster if at all ....

Loading image names and details from the database

or

simply loading from static code on page?

Are there any AJax scripts that may speed things up or CSS / other methods?

If possible I would like to load the parent images and details first then show these 100images as the last to be loaded so that they have something to look at.

Thanks
:D

  • 6 Contributors
  • 6 Replies
  • 136 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Geoff Hinde

Recommended Answers

All 6 Replies

Member Avatar for stendmaster

Greetings! It will be very heavy страници. It is better to make associations on 10шт and to collect on themes. All to get in GIF.

Member Avatar for almostbob 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- bla bla stuff you want to display immediately -->
thumbnails
<img alt='img1 description' id='img1' src='blank.gif' width='80' height='80' />
<img alt='img2 description' id='img2' src='blank.gif' width='80' height='80' />
<img alt='img3 description' id='img3' src='blank.gif' width='80' height='80' />
<img alt='img4 description' id='img4' src='blank.gif' width='80' height='80' />
<img alt='img5 description' id='img5' src='blank.gif' width='80' height='80' />
<img alt='img6 description' id='img6' src='blank.gif' width='80' height='80' />
<img alt='img7 description' id='img7' src='blank.gif' width='80' height='80' />
<img alt='img8 description' id='img8' src='blank.gif' width='80' height='80' />
...
<img alt='img999 description' id='img999' src='blank.gif' width='80' height='80' />
<!-- Bla bla stuff you want to display immediately -->
<script type='text/javascript'>
//<![CDATA[
<!--
document.getElementbyId('img1').src = 'images/pic1.jpg';
document.getElementbyId('img2').src = 'images/pic2.jpg';
document.getElementbyId('img3').src = 'images/pic3.jpg';
document.getElementbyId('img4').src = 'images/pic4.jpg';
document.getElementbyId('img5').src = 'images/pic5.jpg';
document.getElementbyId('img6').src = 'images/pic6.jpg';
document.getElementbyId('img7').src = 'images/pic7.jpg';
document.getElementbyId('img8').src = 'images/pic8.jpg';
// ....
document.getElementbyId('img999').src = 'images/pic999.jpg';
//-->
//]]>
</script>
</body>
</html>

one way, not necessarily a good way, but one way,
Blank.gif is a 1*1px transparent image, the page loads completely then images load and replace the sized blanks in the layout
serve the thumbnails - thumbnailed dont use width/height to resize 200KB images, low res thumbs need only be 3-4KB
something like

<img id='img1' src='blank.gif' width=80 height=80 onclick="document.getElementByID('BigImg').src='images/bigpic1.jpg';">

to display the full images on clicking the thumb

Edited by almostbob because: n/a
Member Avatar for surindersharma 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- bla bla stuff you want to display immediately -->
thumbnails
<img alt='img1 description' id='img1' src='blank.gif' width='80' height='80' />
<img alt='img2 description' id='img2' src='blank.gif' width='80' height='80' />
<img alt='img3 description' id='img3' src='blank.gif' width='80' height='80' />
<img alt='img4 description' id='img4' src='blank.gif' width='80' height='80' />
<img alt='img5 description' id='img5' src='blank.gif' width='80' height='80' />
<img alt='img6 description' id='img6' src='blank.gif' width='80' height='80' />
<img alt='img7 description' id='img7' src='blank.gif' width='80' height='80' />
<img alt='img8 description' id='img8' src='blank.gif' width='80' height='80' />
...
<img alt='img999 description' id='img999' src='blank.gif' width='80' height='80' />
<!-- Bla bla stuff you want to display immediately -->
<script type='text/javascript'>
//<![CDATA[
<!--
document.getElementbyId('img1').src = 'images/pic1.jpg';
document.getElementbyId('img2').src = 'images/pic2.jpg';
document.getElementbyId('img3').src = 'images/pic3.jpg';
document.getElementbyId('img4').src = 'images/pic4.jpg';
document.getElementbyId('img5').src = 'images/pic5.jpg';
document.getElementbyId('img6').src = 'images/pic6.jpg';
document.getElementbyId('img7').src = 'images/pic7.jpg';
document.getElementbyId('img8').src = 'images/pic8.jpg';
// ....
document.getElementbyId('img999').src = 'images/pic999.jpg';
//-->
//]]>
</script>
</body>
</html>

one way, not necessarily a good way, but one way,
Blank.gif is a 1*1px transparent image, the page loads completely then images load and replace the sized blanks in the layout
serve the thumbnails - thumbnailed dont use width/height to resize 200KB images, low res thumbs need only be 3-4KB
something like

<img id='img1' src='blank.gif' width=80 height=80 onclick="document.getElementByID('BigImg').src='images/bigpic1.jpg';">

to display the full images on clicking the thumb

thanks for sharing nice code and information, this is very useful

Member Avatar for newviewit.com

I would break up the images into sections/subpages if possible to decrease the amount of images.

Most webmasters suggest total page size to be around 100kb. Not many people will wait for 100 images that would probably take at least 500kb to download.

If you must have all the images then look into using sprites so only one image has to load.... will decrease page load times substantially by decreasing the amount of requests.

Edited by newviewit.com because: n/a
Member Avatar for Geoff Hinde

What you are trying to do is too large for any reasonable browser/connection to do.

Firstly you should break down the images into groups of similar content.

Secondly, you should have links on your page to the content - say no more
than 30 to a linked page.

Thirdly, don't bother using mysql to load them.

Try a third party software like Simple Viewer for each page. Holds up to 30 images per view.

Fourthly, if your images are so important why are they less than 100 pixels in size? Your granny wouldn't be able to see them.

An app as described can display thumbnails at 68 pixels and images over 400 in less time than you can sneeze.

I like Simple Viewrw, but there are other 3rd party slide shows available on the web.

Try ours at www.halloranphotography.com.au - see gallery.

regards

Geoff A Hinde

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.