Get the Height from The Image that get from A Html File by JavaScript Fetch Api

Question

These are my codes:

a.html

<div class="pic-box">
    <img src="a.jpg" alt="" />
</div>

index.html

<div class="get-box"></div>

index.js

const pageUrl = './pages/a.html',

fetch(url).then(function(response){
    if (response.ok) {
        return response.text();
    }
}).then((data) => {
    $('.get-box').html(data);
    const imageHeight = $('.get-box img').height();
    console.log(imageHeight);
});

I want to get the height of the image, but it showes me it 0. How could I get the true height?

is there a image in .get-box.... try **console.log( $('.get-box).find('img') )** — Rohit Kumar, Oct 20 '17 at 08:39
I suspect that the image hasn't been loaded yet - try binding to to the complete event for images, and check the height there. https://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loaded — Evan Knowles, Oct 20 '17 at 08:42
I use `$('.get-box img').eq(0).height();`, and it still shows me 0. — Mark, Oct 20 '17 at 09:05
`if img.complete` won't work because it won't block until it is complete. That's why you need to bind to the event. — Evan Knowles, Oct 20 '17 at 09:08

score 0 · Answer 1 · 2017-10-20T09:25:42.030

0

You should append a.html source to <div class="get-box"></div> element or replace:

a.html

<div class="pic-box">
    <img src="a.jpg" alt="..." onload="imageLoaded(this)" />
</div>

If you use jQuery:

function imageLoaded(element){
    const imageHeight = $(element).height();
    console.log(imageHeight);
}

const url = './pages/a.html';

$.ajax({ url: url })
  .done(function(html) {
    // Append
    $(".get-box").append(html);

    // or Replace
    // $(".get-box").replaceWith(html);           
  });

edited Oct 20 '17 at 09:25

answered Oct 20 '17 at 09:04

Using jQuery Ajax to load at first time, it still shows me 0. – Mark Oct 20 '17 at 09:11
You need to wait until the image has loaded to have access to the width and height data. – Oct 20 '17 at 09:16
If I can use `jQuery(window).load(function() { … })` again in `.done()`? – Mark Oct 20 '17 at 09:22

Get the Height from The Image that get from A Html File by JavaScript Fetch Api

1 Answers1