Reading width and height of dynamically loaded image

Discussion in 'Javascript' started by Berend, Dec 12, 2007.

  1. Berend

    Berend Guest

    My question: can width and height be derived from a preloaded image?

    I'm trying to load a dynamically generated image as marker in my Google
    Maps mashup. However, a GIcon (Google Icon) object requires width and
    height to be set before loading. I therefore created a hidden <img> in
    my source which I point to the right location using javascript and
    retrieve width and height once loaded.
    This doesn't seem to work, since the marker first scales to an absurd
    width (250px+) and only resizes to the correct measurements after
    reloading all markers.

    Please review my code below. What am I doing wrong? Any hints?
    TIA!



    The code that I thought would do the trick:
    ====================================================
    First, pointing <img> source to the right location:


    HTML: <img src="" id="preloader" style="visibility: hidden;" />

    JAVASCRIPT:
    document.getElementById("preloader").src = "./dynMarker.aspx?...";
    document.getElementById("preloader").onload = createMarker();

    ^^^

    Once the preloading is done, I try to retrieve the width and height:
    (generated imgsize is at least 50px wide and always 35px high)


    function createMarker() {
    var width = document.getElementById("preloader").width;
    var height = document.getElementById("preloader").height;

    var icon = new GIcon();
    icon.image = document.getElementById("preloader").src;
    icon.shadow = "grfx/marker_shadow.png";
    icon.shadowSize = new GSize((100/50)*width, 35);
    icon.iconSize = new GSize(width, height);
    icon.iconAnchor = new GPoint(parseInt(width/2), height);

    ...
    }

    ^^^
     
    Berend, Dec 12, 2007
    #1
    1. Advertising

  2. Berend wrote:

    > document.getElementById("preloader").src = "./dynMarker.aspx?...";
    > document.getElementById("preloader").onload = createMarker();


    Set onload first, then set src, and you need to set onload to a function
    that calls createMarker e.g.

    document.getElementById("preloader").onload = function () {
    createMarker();
    };
    document.getElementById("preloader").src = "./dynMarker.aspx?...";

    Note that you can simply create an Image object in memory with
    var img = new Image();
    img.onload = function () { createMarker(); };
    img.src = './dynMarker.aspx?...';
    there is no need to put an img element into the document and hide it to
    preload images.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Dec 12, 2007
    #2
    1. Advertising

  3. Berend

    Berend Guest

    Martin Honnen wrote:
    > Berend wrote:
    >
    >> document.getElementById("preloader").src = "./dynMarker.aspx?...";
    >> document.getElementById("preloader").onload = createMarker();

    >
    > Set onload first, then set src, and you need to set onload to a function
    > that calls createMarker e.g.
    >
    > document.getElementById("preloader").onload = function () {
    > createMarker();
    > };
    > document.getElementById("preloader").src = "./dynMarker.aspx?...";
    >
    > Note that you can simply create an Image object in memory with
    > var img = new Image();
    > img.onload = function () { createMarker(); };
    > img.src = './dynMarker.aspx?...';
    > there is no need to put an img element into the document and hide it to
    > preload images.
    >


    Thanks for your quick reply!
    I clearly didn't understand the onload property :), adding function() {
    [function to call] } and placing it before settings src did the trick!
    (This also explains why it would always trigger the image's error)
     
    Berend, Dec 12, 2007
    #3
  4. Martin Honnen wrote:
    > Note that you can simply create an Image object in memory with
    > var img = new Image();
    > img.onload = function () { createMarker(); };
    > img.src = './dynMarker.aspx?...';
    > there is no need to put an img element into the document and hide it to
    > preload images.


    And in the worst case, with "preloading" the download of the image data will
    be done twice. Great.


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Dec 12, 2007
    #4
  5. Randy Webb wrote:
    > Thomas 'PointedEars' Lahn said the following on 12/12/2007 6:11 PM:
    >> Martin Honnen wrote:
    >>> Note that you can simply create an Image object in memory with
    >>> var img = new Image();
    >>> img.onload = function () { createMarker(); };
    >>> img.src = './dynMarker.aspx?...';
    >>> there is no need to put an img element into the document and hide it to
    >>> preload images.

    >> And in the worst case, with "preloading" the download of the image data will
    >> be done twice. Great.

    >
    > Almost as nice as having to snip part of an improperly delimited
    > signature.


    My signature is properly delimited, and its content is not subject to any
    standards. Deal with it.

    > But, are you sure it will download the "image data" twice?


    I was talking about the _worst case_, was I not?


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Dec 13, 2007
    #5
  6. In comp.lang.javascript message <>, Thu,
    13 Dec 2007 20:23:08, Thomas 'PointedEars' Lahn <>
    posted:
    >Randy Webb wrote:


    >> Almost as nice as having to snip part of an improperly delimited
    >> signature.

    >
    >My signature is properly delimited, and its content is not subject to any
    >standards. Deal with it.


    Your signature does not conform with the elementary but well-considered
    FYI28/RFC1855. Accordingly, whatever later standards may contain, your
    articles do not have a fit-for-purpose signature and you are misusing
    the delimiter.

    Grow up. Adolescent behaviour is, at most, tolerable in an adolescent.

    --
    (c) John Stockton, Surrey, UK. replyYYWW merlyn demon co uk Turnpike 6.05.
    Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
    Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
    No Encoding. Quotes precede replies. Snip well. Write clearly. Mail no News.
     
    Dr J R Stockton, Dec 14, 2007
    #6
  7. Dr J R Stockton wrote:
    > In comp.lang.javascript message <>, Thu,
    > 13 Dec 2007 20:23:08, Thomas 'PointedEars' Lahn <>
    > posted:
    >> Randy Webb wrote:

    >
    >>> Almost as nice as having to snip part of an improperly delimited
    >>> signature.

    >> My signature is properly delimited, and its content is not subject to any
    >> standards. Deal with it.

    >
    > Your signature does not conform with the elementary but well-considered
    > FYI28/RFC1855.


    First, that is _not_ a standard. Second, yes, it does conform. It consists
    of a signature delimiter "-- " that is followed by at most four lines of
    content. Anything else is beyond that *recommendation*.

    Incidentally, that recommendation includes "A good rule of thumb: Be
    conservative in what you send and liberal in what you receive."

    You two should give the second part more thought. Maybe you even start
    wondering why nobody else in whole wide Usenet has anything to say against
    my signature, neither in public nor in private, and why you two are the
    people who contribute the least amount of *substantial* responses, but the
    most amount of noise to this newsgroup. But I would not expect you to do that.


    EOD

    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Dec 14, 2007
    #7
  8. Randy Webb wrote:
    > Thomas 'PointedEars' Lahn said the following on 12/14/2007 3:58 PM:
    >> You two should give the second part more thought. Maybe you even start
    >> wondering why nobody else in whole wide Usenet has anything to say against
    >> my signature, neither in public nor in private, and why you two are the
    >> people who contribute the least amount of *substantial* responses, but the
    >> most amount of noise to this newsgroup. But I would not expect you to do that.

    >
    > You have obviously mistaken me for someone who gives a flying rat's ass
    > what you think of me. Newsflash, I don't. In fact, you could take my
    > concern for what you think of me, shove it up a gnat's ass, and you
    > wouldn't constipate the poor critter.


    Now that you mention it, that has become mutual. I know much better ways to
    waste my time than dealing with you, and I really wonder now why I actually
    considered to remove you obnoxious troll from my killfile in the first
    place. Welcome back home, then.

    *PLONK*
     
    Thomas 'PointedEars' Lahn, Dec 15, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jan V
    Replies:
    10
    Views:
    7,063
    Kurt M Peters
    Jul 11, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    609
    laurie
    Aug 19, 2003
  3. Lois
    Replies:
    1
    Views:
    3,307
    Ryan Stewart
    Dec 27, 2004
  4. cera
    Replies:
    1
    Views:
    1,301
    Neredbojias
    Aug 18, 2007
  5. Bernd Meier
    Replies:
    6
    Views:
    529
    GTalbot
    Jan 14, 2008
Loading...

Share This Page