What I am looking to do is have a loading page display while all the graphics and webpage renders all the images. The loading should very on the how fast the users bandwidth speed is. I want to try and make the loading page less distracting as the website is a design portfolio. Anyone have any ideas on how this should be done or what you have done in the past? Thanks.

Edit: is it possible just to do like a loading spinner on just images?

But, otherwise you can add this to the head section of the html page.

Code:

<META HTTP-EQUIV=refresh CONTENT="5; URL=http://www.webartzforum.com/Review-h11.htm">

This means after 5 seconds it will go to the http://www.webartzforum.com/Review-h11.htm page

Also, do not forget to add the loading image in the body section of the page.
Edit: Wont work for only images.

Do you mean something like this??

Code:

http://www.dynamicdrive.com/dynamicindex4/preloadit.htm

http://www.lateralcode.com/using-load-icons/
This shall help. Does exactly what you require.

Sanket wrote:http://www.lateralcode.com/using-load-icons/
This shall help. Does exactly what you require.

Nice find. But now I have to figure out how to make it work with jQuery Fancybox. I think, im stuck at the impossible.

Here is my confusing code.

Code:

  <div class="blo3" id="fader1" style="opacity: 0.5;">
          <p><span><strong>Disaster City</strong></span></p>
          <img id="loader" src="Main_Images/Spinner.gif" alt="Loading, Loading!"></img>
          <a id="single_image" title="Disaster City" href="Main_Images/BD600w.jpg">
          <img id="large-img" class="B1" border="0" src="Main_Images/BDOverlay1.png" alt="picture" width="171" height="107" /></a>
          <div class="clr"></div>
          <p><strong>Personal Work</strong><br />Brian DiStefano</p>
          <div class="clr"></div>
        </div>

Code:

<script type="text/javascript">
$(function() {
   $('#large-img').hide();
   $('#large-img').load( function() {
      $('#loader').hide();
      $('#large-img').show();
   } );
});
</script>

Can you tell me which is the image that you want ? I need the whole link of that image. Also which is the loader image?

Sanket wrote:Can you tell me which is the image that you want ? I need the whole link of that image. Also which is the loader image?

Spinner.gif - The loading spinner


BDOverlay1.png - I want spinner to show while its loading this. I have the background picture that goes behind it, but it is in the css.


BD600w.jpg - this shows in jQuery Fancybox when you click the BDOverlay1.png.

Okay, i am a little lost.

When the large image BD600w.jpg is going to be displayed only when you click on it. Which is the large file that needs to be loaded?

Also, the spinner image should go above that rectangular image BDOverlay1.png ???

yah it does sound confusing as hell. The more I look at it, i dont think it will work. It is not really a big deal of having this. Its only intension was for people who are on a slow internet connection. Im gonna be optimizing the pictures to have the best image quality with a little file size.

the BD600.jpg is associated with jQuery and has its own loader.

I mainly wanted the spinner for loading the BDOverlay1.png - In my portfolio I will have about 9-16 of the overlays/pictures. While its all loading the pictures for a user with a slow connection they will see the spinner before the image completely loads.

Edit: I just though of something. This wont work the way I have the overlays setup. The main smaller images that show behind are in the css. The overlays are in the html. The only way this will work if I put the overlay on the image and use the html only for displaying the image. You are probably really lost right now, but ill report back when I straighten things out.

I got it to work. Now here is what I did. First removed all the overlay stuff in the css and html and manually put the border overlay over the image to have one picture. The way I tested it to make sure it works was using a picture in place of the DisasterCityMiniB.png with a file size of 4mb uploaded to tinypic. Thank you for that link Sanket and help. My questions are solved for now.

DisasterCityMiniB.png


basically, I used the same coding I posted above earlier.

Code:

        <div class="blo3" id="fadder1" style="opacity: 0.5;">
          <p><span><strong>Disaster City</strong></span></p>
          <img id="loader" src="Main_Images/Spinner.gif" alt="Loading, Loading!"></img>
          <a id="single_image" title="Disaster City" href="Portfolio_Images/Home/DisasterCity.jpg">
          <img id="large-img" border="0" src="Portfolio_Images/Home/DisasterCityMiniB.png" alt="picture" width="171" height="107" /></a>
          <div class="clr"></div>
          <p><strong>Personal Work</strong><br />Brian DiStefano</p>
          <div class="clr"></div>
        </div>

Thats awesome. Is this online?

Sanket wrote:Thats awesome. Is this online?

Not yet, hopefully by the end of the month. Iv started working on it a couple weeks ago. My brother does all the graphics, I do all the coding. Maby you will see the homepage for the code a page contest.

That would be great

Locked | Solved