0

Есть массив элементов например:

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

Есть ли какое то решение данной проблемы?

10
  • var result = 'false'; будет приравнен к true. 'false' это не boolean a string. Уберите ковычки
    – Den
    Commented 13 июн. 2016 в 13:12
  • @Den, в цикле я проверяю именно строку а не boolean
    – stckvrw
    Commented 13 июн. 2016 в 13:14
  • document.getElementById('test').innerHTML = newArray; незя так. Можно вместо newArray.push делать innerHTML += '<img src="'+arrayOfItems[i]+'.jpg">
    – Doofy
    Commented 13 июн. 2016 в 13:15
  • Сори туплю маленько
    – Den
    Commented 13 июн. 2016 в 13:15
  • @Doofy, innerHTML += все равно проблемы не решает
    – stckvrw
    Commented 13 июн. 2016 в 13:18

1 ответ 1

1
<div class='images'></div>
div = document.querySelector('.images');

var images = ['pic1', 'pic2', 'pic3'];
getImages(images, function(image) {
    div.innerHTML += '<div>' + image + '</div>';
});

function getImages(images, load) {
    images.forEach(function(image, i) {
        var img = new Image();
        img.src = image + '.jpg';
        img.onload = function() { load(img.outerHTML); }
        img.onerror = function() { load('<img>'); }
    });
}
8
  • @stckvrw, обновил. Так нужно? У меня одна картинка загружена, остальные пустые, ошибок нет
    – Doofy
    Commented 13 июн. 2016 в 14:14
  • @stckvrw, от ошибки в консоли никуда не деться
    – Grundy
    Commented 13 июн. 2016 в 14:17
  • @Grundy, если только не вернуть тег без ссылки, друг мой :)
    – Doofy
    Commented 13 июн. 2016 в 14:18
  • @stckvrw, одна картинка из трёх в папке у меня. Видимо твой браузер на img.onload ругается. У меня Opera 38, консоль молчит. Может я ошибаюсь и браузер ругается на пустой тег img
    – Doofy
    Commented 13 июн. 2016 в 14:22
  • @Doofy, ошибка все равно будет, если сервер по запросу вернет 404 статус, либо любой другой. То есть в консоль ошибка выведется.
    – Grundy
    Commented 13 июн. 2016 в 14:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.