Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Unhappy Changing image attributes issue

    Hello, everyone.

    I'm displaying 11 images on a page and trying to use jQuery to resize any image that is over a certain width.

    So the page loads the images, first. I am giving them all a class called theseImages. Then, at the bottom of my document I have the following:

    Code:
    $(document).ready(function(){
        $('.theseImages').each(function(){
            if($(this).width() > 300){$(this).width(300);}
            });
        });
    In FireFox, this is adjusting every image that is wider than 300 pixels to be 300 pixels and it's keeping the ratio for the height. Works great.

    IE and Chrome, however, are a different story. Random images greater than 300 pixels are resizing correctly - and the ones that do resize are different with every page reload or refresh.. it's not always the same ones.

    I appreciate anyone's thoughts/suggestions on this.

    Thank you,
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    You are testing the widths of images that haven't finished loading yet because your code is running as soon as the HTML finishes loading without testing if all the images are loaded yet.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    just use css:

    Code:
    img {max-width: 300px; }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    rnd_me’s solution is probably the best. But in any case, in Webkit browsers you need to add (intrinsic) dimensions to the images in the HTML for them to work as expected.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by felgall View Post
    You are testing the widths of images that haven't finished loading yet because your code is running as soon as the HTML finishes loading without testing if all the images are loaded yet.
    I assumed that since the code was placed in $(document).ready() that it would work after the images were fully loaded. So jQuery ready() will spring into action before images are fully loaded?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Thanks, rnd me and VIPStephan. I'll use the CSS.. was just hoping to get it to work in JS, just for poops and smiles.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,771
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by WolfShade View Post
    I assumed that since the code was placed in $(document).ready() that it would work after the images were fully loaded. So jQuery ready() will spring into action before images are fully loaded?
    yep - what you want in that situation is $(window).load()

  • #8
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Unhappy

    Quote Originally Posted by xelawho View Post
    yep - what you want in that situation is $(window).load()
    ! So much that I don't know about jQuery.. didn't realize that there was a $(window).load(). I'll give that a shot. Thanks, xelawho!
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,771
    Thanks
    55
    Thanked 518 Times in 515 Posts


    although I notice that .load() is now deprecated, with the current preference being
    Code:
    $(window).on('load',funky_stuff)
    http://api.jquery.com/load-event/

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by xelawho View Post


    although I notice that .load() is now deprecated, with the current preference being
    Code:
    $(window).on('load',funky_stuff)
    http://api.jquery.com/load-event/
    It doesnít say anything about being deprecated, only:
    This method is a shortcut for .on('load', handler).
    Just like other common events (click, mouseenter, etc.) both can be used, the .on() function as well as the shortcut.

    And by the way, the above mentioned source also says:
    Caveats of the load event when used with images
    A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

    • It doesn't work consistently nor reliably cross-browser
    • It doesn't fire correctly in WebKit if the image src is set to the same src as before
    • It doesn't correctly bubble up the DOM tree
    • Can cease to fire for images that already live in the browser's cache
    And WolfShade, $(document).ready() actually fires when the DOM tree (i. e. the plain HTML) has been built/parsed completely. This is different from when all the contents have loaded. A document can be ready for manipulation while images are still loading; and it is ready when the HTML has been read from top to bottom, regardless of what else happens on the page.

  • #11
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Thanks for the additional, VIPStephan. I just took xelawho's suggestion and tested it in FireFox - it worked. Haven't tested it in IE or Chrome, yet. I'll do that, now.

    BTW.. this all started as an experiment; learning to use ColdFusions Virtual File System.. the images are in the server memory.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #12
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Tested several times in FF12, IE8, and Chrome(no idea of version number).

    In IE8 and Chrome, every image that is wider than 300 pixels initially loads in its original size, and then is quickly resized to 300 pixels wide, keeping the ratio for height.

    In FF, it happens so fast that it appears as if images larger than 300 pixels wide load at 300 pixels wide.

    So far, $(window).load() is working as expected.

    Thanks, everyone.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,771
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by VIPStephan View Post
    It doesnít say anything about being deprecated
    I would think that getting filed in the "deprecated" category (breadcrumb, top right) and getting labelled as "version deprecated: 1.8" would qualify it as being deprecated, but maybe I am reading the docs wrong.

    My interpretation of the caveats is that they apply to a situation where you are using the "load" listener directly on an image, such as
    Code:
    $('img').on('load', poops_and_smiles)
    which is obviously a different thing to
    Code:
    $(window).on('load', poops_and_smiles)
    but again, maybe I am misreading

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by xelawho View Post
    I would think that getting filed in the "deprecated" category (breadcrumb, top right) and getting labelled as "version deprecated: 1.8" would qualify it as being deprecated, but maybe I am reading the docs wrong.
    Ah right, didnít read the breadcrumb, sorry. I think they should make it a little more obvious, like in a notice (e. g. in a gray box, as they already have others).

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,771
    Thanks
    55
    Thanked 518 Times in 515 Posts
    You would think. I'm not sure what the policy is in terms of support for deprecated methods, but even live() which has now been removed completely gets the same treatment in the docs.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •