[Javascript] Building an image loader...
Guillaume
javascript at webdesignofficina.com
Fri Jul 8 17:10:36 CDT 2005
Hi Harvey,
the purpose of the script basically is to hide some content in a page
with a layer ( lets call it mask ) and display a loading message, until
a high res is image loaded. ( > 1Mo ). Once the image is completely
loaded into the browser, the loading message and the mask disappears,
leaving
place to some content, caption of image and text related, and image.
What i want to avoid is people to stand in front of a page with
informations related to an image and waiting for this image to load,
wich may take a while, depending on connection speed... Frustrating as
you can imagine... In fact this simply means hiding the content ( not
the whole content ) of a page until a high res image is loaded. Other
loading scripts I found on internet usually do this, but when the image
is loaded, redirect the page to another Url. I'd like to avoid this
redirection and simply remove a masking-content layer.
So here is a scheme:
Time 1: Time 2:
Time 3:
--------------------------
----------------------------------
Mask activated Mask activated
Page loaded and displayed
--------------------------
----------------------------------
--------------------------
----------------------------------
Page loads Page loaded
High Res img loaded and dispalyed
--------------------------
----------------------------------
High Res img loads High Res img stil loading
--------------------------
----------------------------------
As for serving images on demand, it's not my idea here.
Hope this makes more sense.
Thanks.
Guillaume.
> Guillaume:
>
> I'm pushing up against my limitations just trying to understand what
> you want to accomplish with this script. What is the application for
> the project? Will it load a large number of images to be displayed on
> demand?
>
> Harvey
>
> -----Original Message-----
> *From:* Guillaume [mailto:javascript at webdesignofficina.com]
> *Sent:* Thursday, July 07, 2005 11:39 AM
> *To:* [JavaScript List]
> *Subject:* Re: [Javascript] Building an image loader...
>
> I came across a Js property wich could be very usefull in the case
> mentioned below: image.complete
>
> Image.complete
> JavaScript 1.1+, JScript 1.0+
> Nav3+, IE3+, Opera3+
>
> Syntax
> image.complete
>
> Description
> The complete property of the Image object is a boolean value that
> specifies if an image
> has finished loading. After an image has completely loaded, the
> property is changed to true. If the load is aborted or an error
> occurs during the loading process, the property will be set to false.
>
> Guillaume.
>
>>
>>
>> Hello all,
>>
>> I would like to have some help on building an image loader.
>> The idea is basic: a page should display a high resolution image
>> that should remain hidden behind a masking layer, wich has a
>> higher z-index value and displays a simple loading message, such
>> as "Loading data". When loaded, the masking layers disappears,
>> displaying the image.
>> I used a previous loading script wich was handling this, with the
>> ability to load an array of images and along the way was crashing
>> Ie.
>> For those interested, the script was built by Glenn Murphy at
>> Bodytag <http://bodytag.org/> ( worth a visit ) and is called
>> bt_loader <http://bodytag.org/nav.php?u=bt_loader/> .
>> I must say the structure of the script i'd like to build is
>> inspired from his script.
>> Here is the idea for the structure of this script:
>>
>>var image = ""
>>var imageWeight = ""
>>var checkLoaded = 0
>>
>>function hideImg() {
>>
>>document.getElementById('load').style.display = 'block';
>>// First thing to do is hide the img with this layer.
>>document.write(<p class="loadingText"> Loading content: "imageWeight"+"Ko" </p>);
>>// In this same layer add the text: Loading content + img weight + Ko.
>>// Adding a class to p, to style it and eventualy make it easier to remove, when loaded.
>>
>>}
>>
>>function getImageWeight() {
>>
>>// Get the image weight that is loaded,
>>// that has the class="image" attached. Benefits: reusable or not on certain images, pages etc...
>>// Get an image weight with Js ? I this possible ? Maybie, with .length ?...
>>// Or should i specify manually it's weight in the content.htm page,
>>// with a value such as:
>>// <img src="1.jpg> <script type="text/javascript">var imageWeight=(1200)</script>...
>>// where 1200 would be the image weight in Ko...
>>
>> |var image = document.getElementsByTagName("img");
>> for (var i=0; i < |imageWeight.length|; i++) {// Initialize a value i... i<imageWeight.length i know this is absolutely wrong !
>> if (image[i].className.match("image"))|// Get all the image in the document that have class="image" attached...
>>|| i= the sum of all img with class="image" attached // add up the sum of all images concerned...
>> // Btw the possible number of images concerned are 0,1 or an array...
>> var imageWeight = Math.round((i)/100);// Returns the weight, the sum of all images (i) in Ko...
>>
>> }
>> }
>>
>>function loadImg() {
>>
>> ||var checkLoaded = Math.round((i/imageWeight)*100);
>>
>> if(checkLoaded == 100) {// If we have reached 100% of the sum loaded,
>>
>> showImg();// remove the loading layer and the loading text created earlier.
>>
>> }
>>
>> }
>>
>>function showImg() {
>> ||
>>document.getElementById('load').style.display = '';
>>// Remove the display block and give the priority back to the css where this layer is set to hidden...
>>// document.write(<p> Loading content: "imageWeight"+"Ko" </p>);
>>// Do i need to remove this as well, as it is part of the layer that will be hidden ? If yes how do i kill it ?
>>// kill the node or the class ? ... I'm lost on this one...
>>
>>}
>>
>>function killLoad() {// If the image is broken, abandon the process after a certain amount of time... 8 seconds here
>>| for (var i=0; i < |imageWeight.length|; i++)|{
>> ||if(i < 0) for {// If image weight value stays < 0...
>> setTimeout(8*1000);// ... for 8 seconds ...
>> showImg()// ... Execute the previous function.
>> }
>> }
>> }
>>
>>document.write(hideImg());// Initialize the script immmediately when the page is first loaded
>>
>>
>> Et voilà... I've pushed things up to the frontier of my skills,
>> so sorry for the mess...
>> But i think this structure is understandable... I might be
>> missing some important things ( cross browser compatibility,
>> accessibility... ) so any improvement are warmely welcomed.
>> Thanks a lot for any help on this.
>>
>> Guillaume.
>>
>>------------------------------------------------------------------------
>>
>>_______________________________________________
>>Javascript mailing list
>>Javascript at LaTech.edu
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>>
>
>------------------------------------------------------------------------
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050709/3099d616/attachment.htm>
More information about the Javascript
mailing list