jquery - image load after .show()

Question

I'm trying to get the dimensions of an image after a div is shown.

What I got:

JQUERY:

$("body").on("click", ".more-info", function(e) {
    e.preventDefault();
    $(".component-alt-main").show(0, function() {
        $(this).find(".component-img").each(function() {
            $(this).find("img").on("load", function() {
                console.log("A")
            });
        });
    });
});

HTML:

<div class="component-alt-main"> <!-- This has display none -->
    <div class="container">
        <div class="components">
            <h3>Versiones alternativas</h3>
            <div class="component-container">
                <div class="component">
                    <div class="component-img">
                        <img src="modulos/topbar/[email protected]">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Puede darse el caso de que tengamos una sección dónde sólo aplique el título.
                        </p>
                    </div>
                </div>
                <div class="component">
                    <div class="component-img">
                        <img src="modulos/topbar/[email protected]">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Variable de un botón pulsable en el lateral derecho. No puede haber más de uno.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I'm trying to get that console.log() after I click a button (.more-info), but it's not entering. I don't know if it's because the images are already loaded (even though .component-alt-main is with display: none;). But if I try to get those image before the .show(), the width of them are 0 obviously.

There's something wrong with the code above?

PS:

I'm asking this because later on I must use AJAX to resize the images once they are loaded.

PSS:*

The console.log placed on .each() works.

@GaneshPutta It's not, it's just an anchor that shows .component-alt-main div — Zander
– Zander, Commented Feb 19, 2018 at 12:37

Vivek Athalye · Accepted Answer · 2018-02-19 15:23:14Z

1

Ref: http://api.jquery.com/load-event/

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

So as you can see it's not a reliable way to use load on img tag. You may try loading the image using AJAX load method and in the complete handler do you work. Alternatively read the img dimensions in server side code and pass it as data attributes on img tag.

edited Feb 19, 2018 at 15:23

answered Feb 19, 2018 at 12:53

Vivek Athalye

2,9792 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohit · Accepted Answer · 2018-02-19 18:43:57Z

Agreed with @Vivek Athalye's answer. This method might also help you in getting the width and height properties for the (sample) images.

<body>
<div class="component-alt-main"> <!-- This has display none -->
    <div class="container">
        <div class="components">
            <h3>Versiones alternativas</h3>
            <div class="component-container">
                <div class="component">
                    <div class="component-img">
                        <img src="https://www.w3schools.com/w3css/img_fjords.jpg">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Puede darse el caso de que tengamos una sección dónde sólo aplique el título.
                        </p>
                    </div>
					<input class="more-info" type="button" value="Get Dimensions"/>
                </div>
                <div class="component">
                    <div class="component-img">
                        <img src="http://www.bajiroo.com/wp-content/uploads/2015/10/most-disturbing-photoshopped-of-the-month-pics-images-photos-pictures-bajiroo-31.jpg">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Variable de un botón pulsable en el lateral derecho. No puede haber más de uno.
                        </p>
                    </div>
					<input class="more-info" type="button" value="Get Dimensions"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$("body").on("click", ".more-info", function(e) {
  e.preventDefault();
    $(".component-alt-main").show(0, function() {
        $(this).find(".component-img").each(function() {
            $(this).find("img").each(function () {
			
 
   console.log("width: " + this.clientWidth + " and Height: "+this.clientHeight);
   
});
        });
    });
});
</script>
</body>

Collectives™ on Stack Overflow

jquery - image load after .show()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related