Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24828 > unrolled thread

can document.images.animation do more?

Back to article view | Back to comp.lang.javascript

Contents

  can document.images.animation do more? "Charles T. Smith" <cts.private.yahoo@gmail.com> - 2014-06-13 20:41 +0000
    Re: can document.images.animation do more? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-13 23:47 +0200

#24828 — can document.images.animation do more?

Hi.

Is there a way to display a variable or other information everytime 
document.images.animation.src() gets invoked?

I have created a simple server to display my photos using 
document.images.animation.src=eval("pic"+counter+".src").  Works fine.  

Now I'd like to display counter with every picture, so the user can set 
that.  But I see that the page doesn't seem to be updated with every call 
to that function, so, e.g. document.write (counter) on the same page 
doesn't get incremented.  Or else, it obscures the image.

Any help is appreciated,
cts

[toc] | [next] | [standalone]

#24831

Charles T. Smith wrote:

> Is there a way to display a variable or other information everytime
> document.images.animation.src() gets invoked?

There is no such method, so none is invoked.
 
> I have created a simple server to display my photos using
> document.images.animation.src=eval("pic"+counter+".src").  Works fine.

By coincidence, because it is wrong.  You should have an array of objects:

  var pic = [
    {src: "…"},
    …
  ];

and then refer to the elements of the array thus, overwriting the “src“ 
*property* value the standards-compliant way:

  document.images["animation"].src = pic[counter].src;

See also the FAQ.

It can be useful to have not references to Object instances but references 
to objects implementing the HTMLImageElement interface as elements of the 
array, because then there is the possibility that image data would be 
preloaded.  See <http://PointedEars.de/scripts/test/dom/hoverMe/> for an 
example.
  
> Now I'd like to display counter with every picture, so the user can set
> that.  But I see that the page doesn't seem to be updated with every call
                                                                       ^^^^
> to that function, so, e.g. document.write (counter) on the same page
  ^^^^^^^^^^^^^^^^
> doesn't get incremented.  Or else, it obscures the image.
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Parse error.  Please review Programming 101.

“img” element objects have an “onload” event handler property to which you 
can assign, and are distributed a “load” event for which you can add, a 
listener.  The listener will be called each time a new image was loaded.

  var img = document.images["animation"];
  
  var listener = function () {
    /* do something */
  };

  if (typeof img.addEventListener == "function")
  {
    img.addEventListener("load", listener, false);
  }
  else
  {
    img.onload = listener;
  }

See also jsx.dom.addEventListener() and jsx.dom.createEventListener() in 
JSX:dom/events.js for a more sophisticated wrapper.

document.write() in the document will only be executed when the document is 
loading, and called after the document it will overwrite the document.  
Review the DOM.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web