Есть массив элементов например:
var arrayOfItems = ['item1','item2','item3'];
И есть картинки в той же папке что и файл с JS-скриптом. Названия картинок совпадают с названиями элементов массива, но не все элементы имеют картинки. Предположим в папке есть картинки item1.jpg и item2.jpg но нету картинки item3.jpg. Нужно перебрать массив элементов через цикл и внести в новый массив div-блоки с названиями элементов первого массива и их картинками, но если под какой то элемент нету картинки тогда нужно избежать ошибки ERR_FILE_NOT_FOUND и внести в таком случае в новый массив div-блок без тега "пустой" картинки.
Т.е. сейчас есть код:
<button onclick="test();">CLICK</button>
<div id="test"></div>
<script>
function test() {
var arrayOfItems = ['item1','item2','item3'];
var newArray = [];
for(i = 0; i < arrayOfItems.length; i++) {
var itemName = arrayOfItems[i];
newArray.push('<div>'+itemName+'<img src="'+itemName+'.jpg"></div>');
}
document.getElementById('test').innerHTML = newArray;
}
</script>
А нужно что то типа:
function test() {
var arrayOfItems = ['item1','item2','item3'];
var newArray = [];
for(i = 0; i < arrayOfItems.length; i++) {
var itemName = arrayOfItems[i];
if(...) { // если картинка с названием элемента существует
newArray.push('<div>'+itemName+'<img src="'+itemName+'.jpg"></div>');
} else {
newArray.push('<div>'+itemName+'</div>');
}
}
document.getElementById('test').innerHTML = newArray;
}
Нашёл вот такое решение:
var img = new Image();
img.src = itemName;
img.onload = function() {
...
};
img.onerror = function() {
...
};
Но не могу его внедрить или не знаю как правильно. Пробовал так:
function checkImg(itemName) {
var img = new Image();
img.src = itemName+'.jpg';
var result = 'true';
img.onerror = function() {
var result = 'false';
};
return result;
}
function test() {
var arrayOfItems = ['item1','item2','item3'];
var newArray = [];
for(i = 0; i < arrayOfItems.length; i++) {
var itemName = arrayOfItems[i];
var result = checkImg(itemName);
if(result == 'true') {
newArray.push('<div>'+itemName+'<img src="'+itemName+'.jpg"></div>');
} else {
newArray.push('<div>'+itemName+'</div>');
}
}
document.getElementById('test').innerHTML = newArray;
}
Но результат на странице тот же: "пустая" картинка под item3 и ERR_FILE_NOT_FOUND
Есть ли какое то решение данной проблемы?
document.getElementById('test').innerHTML = newArray;
незя так. Можно вместоnewArray.push
делатьinnerHTML += '<img src="'+arrayOfItems[i]+'.jpg">
innerHTML +=
все равно проблемы не решает