[Javascript] An image loader nearly working...

[Guillaume]

Nice advises Troy, thank you very much for these useful tips...
I let you know when another version is up.

Guillaume.

> I've seen the script and the page (IE) the image starts to load 
> emediately and it's way to havy.
> The script also, it is expanding more than human attentinon can handle 
> and it is overloading the page.
> Wright now I'm on dialup, and it took me more time to load than to 
> read your script.
>
> You will have to keep it as simple as possible. no more than few lines 
> of script.
> You should tell the visitor how big the image is.
> and you can get it  with: this.filesize
> You should put this.onreadystatechange= inline with the IMG tag to 
> fire the check function
> and check that state 'readyState' after the ready state check has 
> returned 'complete'
> your script is allowed to show the image you have declared 'hidden' 
> and all is done in few lines of script.
>
>
>> From: Guillaume <javascript at webdesignofficina.com>
>> Reply-To: "\[JavaScript List\]" <javascript at LaTech.edu>
>> To: "[JavaScript List]" <javascript at LaTech.edu>
>> Subject: [Javascript] An image loader nearly working...
>> Date: Thu, 14 Jul 2005 19:06:30 +0200
>>
>> Troy and Hakan,
>>
>> thanks for both of you for your answers.
>> I do understand your comments about this version of the script.
>> If you don't mind looking at the very last version of the script 
>> <http://www.hablablow.com/devX/loadTest2/testXXX7.htm> we have built 
>> with Roger Roelofs
>> The previous version we were talking about was my missed attempt to 
>> bring up a simple script... I understand now where i failed... Thanks 
>> to the work of Roger, we came up with another solution... It is 
>> pretty close to the goal we want to reach but we are still facing 
>> some downsides: the script does not run on Ie and the loading layer 
>> does not fire instantly when the page is loaded...
>> If we could join hands on this, maybie something nice will show up.
>>
>> Thank you for your interest on this.
>>
>> Regards.
>>
>> Guillaume.
>>
>>> I have to agree with Hakan,
>>> the 'get elements by tag name' will return a collection of the 
>>> specified tag that doesn't have any directly connected properties 
>>> with that tag type.
>>> The only chance that this script will work is, only if you have just 
>>> one IMG in the coll, so the script returns entity not the collection 
>>> and you will be able to get the 'complete' property of it.
>>> otherwise, this script is broken, nonworking for all other cases 
>>> where you've inserted more than one image inside the 'content' 
>>> container.
>>> If this is the case, non of the browsers will do the magic. You will 
>>> get error containing somethin like can't get complete property from 
>>> the collection
>>>
>>> regards
>>>
>>>
>>>> From: Hakan <hakan at backbase.com>
>>>> Reply-To: "\[JavaScript List\]" <javascript at LaTech.edu>
>>>> To: "[JavaScript List]" <javascript at LaTech.edu>
>>>> Subject: Re: [Javascript] An image loader working in FF but not in 
>>>> Opera,Safari...
>>>> Date: Wed, 13 Jul 2005 15:01:16 +0200
>>>>
>>>> Hi Guillaume,
>>>>
>>>> Two things:
>>>>
>>>> >     var img = content.getElementsByTagName("img");
>>>> >
>>>> >     if ( img.complete ) {
>>>>
>>>> getElementsByTagName returns an array with the nodes matching the 
>>>> tag name. This array doesn't have a "complete"-property, and I'm 
>>>> guessing that the only reason this "works" in Firefox is because it 
>>>> will get here on window load and, since both conditions hide the 
>>>> loading div, it gets hidden.
>>>>
>>>> > window.onload = checkDone;
>>>>
>>>> When this triggers, images should already have been loaded.
>>>>
>>>> I'm sorry, but this script seems to do nothing.
>>>>
>>>> Regards,
>>>> H
>>>>
>>>> Guillaume wrote:
>>>>
>>>>>
>>>>> Hi list,
>>>>>
>>>>> I've managed to build with Roger Roelofs an image preloading script.
>>>>> It's working just fine in Firefox, but Safari and Opera won't 
>>>>> catch the "loading image..." process, and just display the image 
>>>>> when the page is loaded.
>>>>> Here is the inline script:
>>>>>
>>>>> <script type="text/javascript">
>>>>>
>>>>> loader += '<div id="loader" style="display:block;"><p>Loading 
>>>>> data...<p/></div>';
>>>>>
>>>>> document.write(loader);
>>>>>
>>>>> </script>
>>>>>
>>>>>
>>>>> <script type="text/javascript">
>>>>>
>>>>> function checkDone() {
>>>>>
>>>>>     var content = document.getElementById("content");
>>>>>
>>>>>     var img = content.getElementsByTagName("img");
>>>>>
>>>>>     if ( img.complete ) {
>>>>>
>>>>>         document.getElementById('loader').style.display = 'none';
>>>>>
>>>>>     } else {
>>>>>
>>>>>
>>>>>
>>>>>         document.getElementById('loader').style.display = 'none';
>>>>>
>>>>>
>>>>>
>>>>>             }
>>>>>
>>>>> }
>>>>>
>>>>> window.onload = checkDone;
>>>>>
>>>>> </script>
>>>>>
>>>>> I have setup a test page to understand what's the script about. 
>>>>> <http://www.hablablow.com/devX/loadTest2/testXXX5.htm>
>>>>> So any help on this is warmly welcome...
>>>>>
>>>>> Thanks.
>>>>>
>>>>> 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
>>>
>>>
>>>
>>> _________________________________________________________________
>>> Don't just search. Find. Check out the new MSN Search! 
>>> http://search.msn.com/
>>>
>>> _______________________________________________
>>> 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
>
>
> _________________________________________________________________
> On the road to retirement? Check out MSN Life Events for advice on how 
> to get there! http://lifeevents.msn.com/category.aspx?cid=Retirement
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>