JQuery: Wait for changed image src attribute to be loaded

Question

I'm completely new to JavaScript and JQuery, and I have the following problem I was not able to solve by reading other SO Q&As:

I have a function that GETs the path to an image (/API/currentImage) and wants to change the src attribute of an img, and then repeat itself after 1 second. So far, so good, the following code works. But: If the image is large, the GET for the image itself may take rather long (longer than 1 second). So I would like to execute setTimeout not when the AJAX requests are finished, but when the image is finally loaded ("The image loading after $('img').attr("src", r1[0]) has finished").

loadImg = function() {
  $.when(
    $.ajax({
      url: "/API/currentImage"
    }),
    $.ajax({
      url: "/API/currentId"
    })
  ).done(function(r1, r2) {
    $('#iid').text(r2[0])
    $('img').attr("src", r1[0])
    window.setTimeout(function () {
      loadImg()
    }, 1000)
  })
}

How can I achieve that?

http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — Blazemonger, Oct 20 '16 at 19:01
Possible duplicate of [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) — Damian, Oct 20 '16 at 19:04

Fribu - Smart Solutions · Answer 1 · 2016-10-20T19:32:45.573

2

$('img').on("load",...)

should to the trick.

ADDED:

<img />

  <div id="hi"></div>
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script>

    $(document).ready(function() {
      var i = 0;
      var h = $("#hi");

      $("img")[0].onload = function() {
        //alert("done");
        i++;
        h.html(i);
      }


      $("img").attr("src", "http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e")
    });

  </script>

edited Oct 20 '16 at 19:32

answered Oct 20 '16 at 19:04

Fribu - Smart Solutions

2,675
3
26
57

This fires too often, and I don't know why. Trying it with `$('img').on("load", function(){ alert("done")}).attr("src", r1[0])`, leaving the rest the same, opens 1 messagebox on the first reload, 2 on the second, 3 on the third.... ohhh, because I register another new event handler every time the method is run... Give me a moment :D – Markus Weninger Oct 20 '16 at 19:22
Okay, got it working with this. +1. I will now have a look if this also has a problem with cached images as in the related answers. – Markus Weninger Oct 20 '16 at 19:31
@MarkusWeninger I added an example, somehow it does get called multiple times with on("load") but with native onload event it works fine. – Fribu - Smart Solutions Oct 20 '16 at 19:34
I now also posted an answer, where I use `one` instead of `on`, which looks more compact in my opinion. Thanks for your help! – Markus Weninger Oct 20 '16 at 19:41

score 1 · Accepted Answer · answered Oct 20 '16 at 19:40

1

Similar to @Fribu's answer, I now implmented it using the one function, instead of using on:

$('img').one("load", function () {
    window.setTimeout(function () {
        loadImg()
    }, 1000)
}).attr("src", newSrc)

answered Oct 20 '16 at 19:40

Markus Weninger

8,844
4
47
112

score 0 · Answer 3 · answered Oct 20 '16 at 19:03

0

Try this:

$('img').attr("src", r1[0]).done(function(){
    window.setTimeout(function () {
      loadImg()
    }, 1000)
});

OR

$('img').load(function () {
        window.setTimeout(function () {
          loadImg()
        }, 1000)
    });

answered Oct 20 '16 at 19:03

gschambial

1,245
1
8
21

I tried both (found them in another answer) but they don't work. – Markus Weninger Oct 20 '16 at 19:20

JQuery: Wait for changed image src attribute to be loaded

3 Answers3