[Javascript] An image loader nearly working...
Guillaume
javascript at webdesignofficina.com
Fri Jul 15 06:11:05 CDT 2005
Dear Troy thank you very much for following this post...
> This line (110) of script has error
> targetImg.onload = function() { targetImg.complete = true };
> You can not set the complete property neither to true or false, this
> is read only property
> this: targetImg.complete = true
> should be: targetImg.complete == true (compared)
Ok noted...
>
> But to cut this shorter, why don't you explain to us the arangement
> the idea of your page.
> Tell me if I understood it so far.
> You like to have a pgae that will have a big image in it, but since it
> is large, you wisht to display a message "image loading" until the
> image has loaded completely so you can show it instantly.
This is it exactly Troy... There only a single high res image that
should load behind a masking layer and displaying in it a loading
message... By default this layer has display:none set in Css, to avoid
those who have Js disabled to see this mask...
When the image is loaded the mask is removed... I've look at the
property you mentioned earlier: this.filesize... We won't be able to
retrieve this value until the image is completely loaded... so I'm
looking to get this information with php... As for
this.onreadystatechange i think this is only a Ie property...
img.complete seems to work for other browsers except Safari... So we
could just mix this 2 to make the script cross-browser...
>
> All of this will take less that 10 lines of short script with the
> right aproach.
I'm very curious about it and i strongly believe you... The shorter the
script is the easier it will be to use...
Thanks Troy.
Regards.
Guillaume.
>
>> From: Guillaume <javascript at webdesignofficina.com>
>> Reply-To: "\[JavaScript List\]" <javascript at LaTech.edu>
>> To: "[JavaScript List]" <javascript at LaTech.edu>
>> Subject: Re: [Javascript] An image loader nearly working...
>> Date: Thu, 14 Jul 2005 22:40:02 +0200
>>
>> 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.
>>>>>>
>
> _________________________________________________________________
> FREE pop-up blocking with the new MSN Toolbar - get it now!
> http://toolbar.msn.click-url.com/go/onm00200415ave/direct/01/
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
More information about the Javascript
mailing list