[Javascript] An image loader nearly working except for IE

Mon Jul 18 04:06:03 CDT 2005

Dear Troy,

> Hello, Guillaume!
> I have to repply fast. Sems to me you've forgoten that the script I 
> promissed was written for different purposes, that is: scrolling very 
> large images.That script will make it more convenient for the user to 
> view the whole picture srolling the parts of it with the mouse exactly 
> like adobe Acrobat does. You can associate your page with this script, 
> so if the original picture can't fit in my 1024x768 screen resolution 
> I may scroll it by mouse. Just a thought.
> (I've proposed that just as addon functionality)

Ok i missed something obvious in fact... Thank for this script... I'll 
see if i can use it in another case, very interesting idea indeed...

>
> But, here is my solution proposal for IE browsers,
>
> <IMG ID='img' SRC=... onReadyStateChange="isImageLoaded()" ...>
>
>
> function isImageLoaded(){
> if( document.images[0].readyState=='complete'){ //if image has no ID.
> mask.style.display='none'}else{
> mask.style.display='block'}
> }
> Or you can do it this way:
>
> function isImageLoaded(){
> if( img.readyState=='complete'){ //if image has ID="img".
> mask.style.display='none'}else{
> mask.style.display='block'}
> }
> The "else" condition is to display the mask for the first time, if by 
> default for noscript browsers you've set the mask display property to 
> "none", otherwise if not, you may completely remove 
> "else{mask.style.display='block'}" statement from the function 'cause 
> there's no need for it.

Ok, noted... nice expalnation also... Just a remark: is there a way we 
can avoid to have

 <IMG ID='img' SRC=...  onReadyStateChange="isImageLoaded()" ...>

...not inline.
One last thing what's the [0] i see in many scripts for ?

Thanks.

Guillaume.

>
> Please Test it and repply.
> Regards
>
>
>> 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 except for IE
>> Date: Sun, 17 Jul 2005 15:12:36 +0200
>>
>> Dear Troy,
>>
>> Thank you for your reply, i added a few comments below...
>>
>>> All right, cliche does not mean no value strait ahead.
>>> Taking pictures of nature is a cliche already, but taking great 
>>> pictures of nature, is an art.
>>
>>
>>
>> Ooops... there was not any negative value for the use of "cliche", 
>> sorry... I used it my french mind where a cliche first means the 
>> object, the photography... But you can also use it to denote 
>> something that has a negative value in the sense you hear it...
>>
>>>
>>> The script I mentioned earlier is made for maps, scout maps etc., 
>>> but it is very suitable for other pictures that don't fit your 
>>> screen also.
>>> it should be 100% compatible with NN and IE all versions, not sure 
>>> about others.
>>> here it is: (for aesthetic reasons please declare 
>>> style="overflow:hidden" in the <Body> tag)
>>>
>>> var x, y, dx, dy, dB=document.body;
>>> function enableMove(){
>>> dB.style.cursor="move" //can't make it work!
>>> x=event.screenX
>>> y=event.screenY
>>> dx=x+dB.scrollLeft
>>> dy=y+dB.scrollTop
>>> }
>>> function movingNow(){
>>> if (window.event.button==1) {
>>> x=event.screenX
>>> y=event.screenY
>>> dB.scrollLeft = 0-(x-dx)
>>> dB.scrollTop = 0-(y-dy)
>>> dB.style.cursor="move"
>>> }
>>> }
>>>
>>> function setItBack(){dB.style.cursor='';}
>>> function retF(){return false}
>>>
>>> document.onmousedown =enableMove
>>> document.onmousemove =movingNow
>>> document.onmouseup =setItBack
>>> document.onselectstart=retF
>>> document.ondragstart =retF
>>
>>
>>
>> Troy, i really don't get the point of this script... Does this method 
>> can be used to preload images ? I'm sorry but my skills are limited 
>> and maybie i'm missing something obvious...
>>
>>>
>>> [notice: if you have other window independable objects in the page 
>>> (like inputs etc) this script might return some errors,
>>
>>
>> Yes, i do have inputs on the page i will build with this script...
>>
>>> because selection will not be disabled for this type of objects by 
>>> this script and by default]
>>> you may remove the set cursor lines in order to cut the script shorter.
>>>
>>> I believe that making scripts targeting one browser only, is one of 
>>> the best ways to go.
>>> but this mean that you always have to create the snifer page that 
>>> will direct the user browser to the right scipts and the right page 
>>> dependable to the broser system hitting it.
>>
>>
>> Not if we can make it go cross-browser... Ie is only missing in the 
>> list of working browsers. J. Lester came up with a version of the 
>> script that has downsides on a user-friendly level, but that is 
>> apparently perfectly working, including Ie. The only way to make IE 
>> catch it is the use of this line ( inside the J. Lester script ) :
>>
>> // xPloder doesn't handle onload very well, //onreadystatechange is 
>> more accurate [tested to work in xPloder 5/5.5/6]
>> if (img.onreadystatechange)
>> img.onreadystatechange = function() { if (this.readyState == 
>> 'complete') document.getElementById('mask').style.display = 'none'; };
>>
>>
>> As you mentioned this property in an earlier mail, I'd like to have 
>> your thoughts about this...
>>
>>
>>> The 'this.complete' is god choice (almost universal) but the weaknes 
>>> is in the fact that it does not ocure as event. So you have to check 
>>> its state continuously. (I hate timers, they slow the system down) 
>>> but it reveals it self as the last resort in this casse.
>>
>>
>>
>> We could mix it with the onreadystatechange mentioned above to make 
>> it go cross-browser...
>>
>>>
>>> Waiting to see your modified script
>>
>>
>>
>> I'll try to add the lines mentioned above to target IE and i'll let 
>> you know.
>>
>> Thank you very much.
>>
>> Regards.
>>
>> Guillaume.
>>
>>
>>
>>
>>
>>
>>
>> _______________________________________________
>> 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.click-url.com/go/onm00200636ave/direct/01/
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>