Как создать возможные URL-адреса изображений и проверить, существуют ли они с помощью jQuery

Question

Итак, короче говоря, наша компания приобрела веб-сайт у компании. У них есть свой собственный язык, похожий на Smarty. У них очень грубый набор функций, встроенных в их шаблон, который они "создали" для нас. Этот шаблон не предлагает функцию отображения изображений товаров в корзине. Итак, я должен "угадать", какие URL-адреса изображений.

Поскольку я не могу создавать в шаблоне какие-либо PHP-подобные функции, я должен использовать javascript/jQuery.

Что мне нужно сделать: создать несколько возможных URL, проверить, правильно ли я угадал URL. Если так, то мне нужно заменить <div>фоновое изображение с действительным URL изображения.

HTML

<ul id="session-menu">

    <li class="drop-down cart">

        <a href="/store/go/basket/" class="icon-cart">
            Shopping Cart
        </a>

        <div class="drop drop-right">
            <ul>
                <li data-name="Intel i7 4770K" data-code="intel-4770k" data-qty="1">
                    <div class="image">
                        <a href="/Intel-i7-4770K/"></a>
                    </div>
                    <div class="text">
                        <a href="/Intel-i7-4770K/">Intel 4770K</a>
                        <span class="qty">Quantity: 1</span>
                        <span class="price">Price: $275</span>
                    </div>
                </li>
            </ul>
        </div>

    </li>

</ul>

JS

var dirs = '/product_images/18/4301/';
var ext = '.jpg';
var element = $('#session-menu .cart li');

$('#session-menu .cart li').each(function(){
    var data = $(this).data();
    for (var i in data){
        console.log(data[i]);
        checkUrl(createUrl(data[i]));
    }
});

function createUrl(val) {
    var imgStr = dirs + val.replace(/ |\.|\//g, '-').replace(/"|'/g, '').toLowerCase().toString() + ext;

    console.log(imgStr + ' has been made');

    return imgStr;
}

function checkUrl(img) {
    $.ajax({
        url: img,
        type: "HEAD",
        success: function() { console.log(img + ' exists'); changeBgImg(img); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

function changeBgImg(img) {
    $('#session-menu .cart li .image').children('a').css('background-image', img);
}

Изображения (если они существуют) имеют вид '/product_images/18/4301/intel-i7-4770k', '/product_images/18/4301/intel-4770k' или '/product_images/18/4301/large-intel-4770k.

Я действительно предпочел бы сделать это в плагине jQuery, но это просто усложнило мне задачу при попытке заставить его работать (потому что я супер ржавый). Бонусные баллы для тех, кто может показать мне это в виде плагина LOL.

Любая помощь в выяснении этого будет принята с благодарностью. У меня был другой сценарий, делавший по сути то же самое ранее, но все проверки $.ajax вернулись успешно? Хотя изображение не существует. Даже с изменениями выше, проверки всегда возвращались успешно...

Answer 1

Может быть, попробовать использовать запрос get?

function checkUrl(img) {
    $.ajax({
        url: img,
        type: "GET",
        success: function() { console.log(img + ' exists'); changeBgImg(img); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

Я только что проверил это на моем собственном сайте. При ссылке на существующее изображение оно вернулось успешно. При связывании с несуществующим изображением оно возвращалось с ошибкой.

Answer 2

Поэтому мне пришлось удалить data-qty атрибут, потому что сценарий из-за ошибки с ним там... Я также должен был передать элемент "$(this)" через функции, чтобы я мог в конечном итоге изменить BG для этого конкретного элемента, когда я нашел правильное изображение... Кажется, что я мог бы структурировать этот скрипт по-другому, чтобы избежать необходимости передавать его через несколько функций... Может быть, просто установить переменную вне функций... Да:)

HTML

<ul id="session-menu">

    <li class="drop-down cart">

        <a href="/store/go/basket/" class="icon-cart">
            Shopping Cart
        </a>

        <div class="drop drop-right">
            <ul>
                <li data-name="Intel i7 4770K" data-code="intel-4770k">
                    <div class="image">
                        <a href="/Intel-i7-4770K/"></a>
                    </div>
                    <div class="text">
                        <a href="/Intel-i7-4770K/">Intel 4770K</a>
                        <span class="qty">Quantity: 1</span>
                        <span class="price">Price: $275</span>
                    </div>
                </li>
            </ul>
        </div>

    </li>

</ul>

JS все еще очень неприятен для меня. Похоже, что это может быть составлено гораздо лучше. Как я уже сказал, мне нужно будет выполнить этот набор функций на некоторых других объектах нашего сайта. Было бы неплохо иметь как плагин, но аккуратнее...

ТАКЖЕ, похоже, что я предполагаю несколько действительных URL-адресов (я проверил, и он находит несколько изображений для каждого элемента). Так как я могу настроить ниже, чтобы перестать угадывать URL, когда он находит действительный. И должна ли быть какая-то система приоритетов на месте? Например, "если URL-адрес с именем данных И КОД данных действителен, ТОГДА использовать URL-адрес с данными"?

JS

var dirs = '/product_images/18/4301/';
var ext = '.jpg';
var element = $('#session-menu .cart li');

element.each(function(){
    var data = $(this).data();
    for (var i in data){
        checkUrl(createUrl(data[i]), $(this));
    }
});

function createUrl(val) {
    var imgStr = dirs + val.replace(/ |\.|\//g, '-').replace(/"|'/g, '').toLowerCase().toString() + ext;

    return imgStr;
}

function checkUrl(img, el) {
    $.ajax({
        url: img,
        type: "HEAD",
        success: function() { console.log(img + ' exists, changing background image...'); changeBgImg(img, el); },
        error: function () { console.log(img + ' does not exist'); }
    });
}

function changeBgImg(img, el) {
    el.find('.image a').css('background-image', 'url(' + img + ')');
}