Append img if exists

Question

in order to not make the html file too heavy, and for simple and fast reading porpuses, I wanted to create img elements "dynamically" but only if they exist in the server, that's what I exptect as result, so I tried bother the two solutions here : Question
the solution of error() mehode doesn't work : Demo
the console says $(...).error is not a function, I don't know why
I tried to use a flag

$('ul').each(function() {
  for (i = 2; i < 10; i++) {
    var flag = true
    image = new Image()
    image.src = $(this).find('img').attr('src').replace(/\d/, i)
    $(image).error(function() {
      flag = false
    })
    if (flag /*or i can just write: flag==true*/ ) {
      //do nothing
    } else {
      $(this).append('<li>' + $(image) + '</li>')
    }
    //or just => flag ? return : $(this).append('<li>' + $(image) + '</li>')
  }
})

but it doesn't work with all the options I tried I also tried to not use .error() and just use if(image.width!=0) or if($(image).width()!=0) but none of them work, when I try to get the width in the console either it says 0 (for first option) or undefined

the second solution of Ajax doesn't work either : Demo
I don't know if success is the right parametre to use, I checked the documentation in jquery website, and it's the only parameter that makes sens to me for this matter
I think there are a lot of mistakes I did, please guide me thanks in advance

You forgot a `var` for `i` and `image`. Don't create globals :) — ThiefMaster, Dec 25 '15 at 18:46

adeneo · Accepted Answer · 2015-12-26T01:53:57.230

0

jQuery doesn't really have a .error() method (it was deprecated in 1.8), it's the native image.onerror, but jQuery will support it if you do $(image).on('error', function() {....

But why not use the image.onload event instead

$('ul').each(function(index, elem) {
    for (var i = 2; i < 10; i++) {
        (function(image) {

             image.onload = function() { // image loaded successfully
                 $(elem).append( $('<li />').append(image) );
             }

             image.src = $(elem).find('img').attr('src').replace(/\d/, i);
        })(new Image());
    }
});

edited Dec 26 '15 at 01:53

answered Dec 25 '15 at 18:15

adeneo

312,895
29
395
388

Note that some images may be cached in the browser, which will not trigger the load event. See [this answer](http://stackoverflow.com/a/5933319/1028949) for more details. In addition, sometimes it is wiser to use `image.attachEventListener('load', ...)` instead of assigning directly to `onload` since it will overwrite any other potential load events. – jeffjenx Dec 25 '15 at 18:19
@Quantastical - it's a brand new image that we just created, it doesn't have any other handlers. `image.complete` is mostly an old hack for older IE versions, which doesn't always fire the `onload` handler when the image is cached, it's not really needed anymore, unless one just have to support old IE. – adeneo Dec 25 '15 at 18:21
can you provide a Demo ? because it doesn't work. as for .error() i'v provided the link of the documentation if you'd like to visit, i think onerror is pure javascript while .error() is jquery and they both are the same thing. – Dec 25 '15 at 18:31
the code you provided is waaaaaays too advanced but thanks lol, a function enclosed with two parenthesis followed right after by two parenthesis and `new Image()` withing them, I understand it after reading [**this**](http://goo.gl/ufVyAb) i understand this parameter but i didn't know what has been passed to `index` and `elem` lol. your demo works fine but i don'thave links in an array, links are generated dynamically using `.replace()` i don't know how to update your demo, i tried but it says can't replace of undefined, thanks a lot for helping me – Dec 25 '15 at 21:31
The function is an IIFE, it makes sure the variables aren't overwritten on the next iteration by creating a scope. – adeneo Dec 26 '15 at 01:54
And fixed the issue with `this`, it was supposed to use `elem` from the `$.each` method instead. – adeneo Dec 26 '15 at 01:55

score 0 · Answer 2 · answered Dec 25 '15 at 18:24

0

You need to use onerror, for example:

function checkImage(src, good, bad) {
  var img = new Image();
  img.onload = good;
  img.onerror = bad;
  img.src = src;
}


var imageExist = "http://jsfiddle.net/img/logo.png";
var imageNotExist = "foo.gif";

checkImage(imageExist, function() {
  alert(this.src + " " + "good");
}, function() {
  alert("bad");
});

checkImage(imageNotExist, function() {
  alert("good");
}, function() {
  alert(this.src + " " + "bad");
});

answered Dec 25 '15 at 18:24

Gabriel Rodrigues

510
1
8
29

there's a problem when you use `onload` inside a for loop, which is it only executes after the for loop finishes entirely, and i don't understand why ! here's a [demo](https://jsfiddle.net/22hva05t/) – Dec 25 '15 at 22:59

Append img if exists

2 Answers2