par
Naroth » 27 nov. 2020, 16:16
Bonjour,
La première solution la plus "simple" est d'ajouter un deuxième callback en paramètre qui sera appelé quand la photo n'est pas trouvé
J'ai modifié ton exemple :
https://jsfiddle.net/uhbf60z5/3/
function testImage(url, onSuccessCallback, onErrorCallback, timeout) {
timeout = timeout || 5000;
var timedOut = false, timer;
var img = new Image();
img.onerror = img.onabort = function() {
if (!timedOut) {
clearTimeout(timer);
onErrorCallback();
}
};
img.onload = function() {
if (!timedOut) {
clearTimeout(timer);
onSuccessCallback(url, "success");
}
};
img.src = url;
timer = setTimeout(function() {
timedOut = true;
onErrorCallback();
}, timeout);
}
function record(url, result) {
document.body.innerHTML += "<span class='" + result + "'>" +
result + ": " + url + "</span><br>";
}
testImage("http://www.cnn.com/foo.jpg", record, () => {
testImage("http://photos.smugmug.com/photos/invalid344291068_HdnTo-Ti.jpg", record, () => {
testImage("http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", record, () => {
testImage("https://www.google.com/images/srpr/logo3w.png", record, () => {
console.log("error")
});
});
});
});
En revanche si tu as beaucoup d'image à vérifier ça peut vite rendre le code très lourd à lire
Si tu es intéressé par une version plus simple à lire on peut utilisé les
promesses
https://jsfiddle.net/hjc7pofn/13/
function testImage(url, timeout) {
return new Promise((resolve) => {
timeout = timeout || 5000;
var timedOut = false, timer;
var img = new Image();
img.onerror = img.onabort = function() {
if (!timedOut) {
clearTimeout(timer);
resolve(false);
}
};
img.onload = function() {
if (!timedOut) {
clearTimeout(timer);
resolve(url)
}
};
img.src = url;
timer = setTimeout(function() {
timedOut = true;
resolve(false)
}, timeout);
})
}
function record(url, result) {
document.body.innerHTML += "<span class='" + result + "'>" +
result + ": " + url + "</span><br>";
}
(async() => {
let images = [
"http://www.cnn.com/foo.jpg",
"http://photos.smugmug.com/photos/invalid344291068_HdnTo-Ti.jpg",
"http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
"https://www.google.com/images/srpr/logo3w.png"
]
for await( let img of images ) {
let image = await testImage( img )
if( image ) {
record(image, "success");
break;
}
else {
record(img, "error")
}
}
})();
Bonjour,
La première solution la plus "simple" est d'ajouter un deuxième callback en paramètre qui sera appelé quand la photo n'est pas trouvé
J'ai modifié ton exemple : https://jsfiddle.net/uhbf60z5/3/
[JS]
function testImage(url, onSuccessCallback, onErrorCallback, timeout) {
timeout = timeout || 5000;
var timedOut = false, timer;
var img = new Image();
img.onerror = img.onabort = function() {
if (!timedOut) {
clearTimeout(timer);
onErrorCallback();
}
};
img.onload = function() {
if (!timedOut) {
clearTimeout(timer);
onSuccessCallback(url, "success");
}
};
img.src = url;
timer = setTimeout(function() {
timedOut = true;
onErrorCallback();
}, timeout);
}
function record(url, result) {
document.body.innerHTML += "<span class='" + result + "'>" +
result + ": " + url + "</span><br>";
}
testImage("http://www.cnn.com/foo.jpg", record, () => {
testImage("http://photos.smugmug.com/photos/invalid344291068_HdnTo-Ti.jpg", record, () => {
testImage("http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", record, () => {
testImage("https://www.google.com/images/srpr/logo3w.png", record, () => {
console.log("error")
});
});
});
});
[/JS]
En revanche si tu as beaucoup d'image à vérifier ça peut vite rendre le code très lourd à lire
Si tu es intéressé par une version plus simple à lire on peut utilisé les [url=https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses]promesses[/url]
https://jsfiddle.net/hjc7pofn/13/
[JS]
function testImage(url, timeout) {
return new Promise((resolve) => {
timeout = timeout || 5000;
var timedOut = false, timer;
var img = new Image();
img.onerror = img.onabort = function() {
if (!timedOut) {
clearTimeout(timer);
resolve(false);
}
};
img.onload = function() {
if (!timedOut) {
clearTimeout(timer);
resolve(url)
}
};
img.src = url;
timer = setTimeout(function() {
timedOut = true;
resolve(false)
}, timeout);
})
}
function record(url, result) {
document.body.innerHTML += "<span class='" + result + "'>" +
result + ": " + url + "</span><br>";
}
(async() => {
let images = [
"http://www.cnn.com/foo.jpg",
"http://photos.smugmug.com/photos/invalid344291068_HdnTo-Ti.jpg",
"http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
"https://www.google.com/images/srpr/logo3w.png"
]
for await( let img of images ) {
let image = await testImage( img )
if( image ) {
record(image, "success");
break;
}
else {
record(img, "error")
}
}
})();
[/JS]