[Javascript] An image loader nearly working...
Flavio Gomes
flavio at economisa.com.br
Fri Jul 15 08:19:18 CDT 2005
Let me try to help too. ^^
People, take a look at my example (attached)
I changed the image to smaller one, on somebody elses' website to
increase 'testing' speed. To retry the test 'fully' refresh the page.
(Ctrl+F5 for IE, Shift+Ctrl+R for Gecko) worked fine on Mozilla and IE
for me, please test it there.
Ps.: Yes, it's inline scripting.
--
Flavio Gomes
flavio at economisa.com.br
Guillaume wrote:
> 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.
>>>>>>>
>>>>>>>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050715/33c824d0/attachment.html>
More information about the Javascript
mailing list