Как я могу изменить src моего изображения при изменении размера только один раз, если условие истинно, а не каждый раз, когда окно изменяет размеры?

Question

В настоящее время я создаю функцию для захвата изображения src и затем измените src на меньшее мобильное дружественное изображение.

Я пытаюсь сделать это как можно более динамичным и гибким, но сейчас я тестирую только одно изображение.

Проблема заключается в том, что при изменении размера скрипта он будет продолжать добавлять строку текста в src, что в конечном итоге приводит к ее разрыву. (Regex также не будет работать с абсолютным путем, поэтому я не ожидаю, что изображение будет работать.)

Путь должен быть:

<img src="http://chatfielddrilling.com/Chatfield%20V2/images/home-slide-1-mbl.jpg" alt="overview of building" />

Но если Regex не заменит все, это будет выглядеть так:

<img src="http://chatfielddrilling.com/Chatfield%20V2/images/home-slide-1-mbl-mbl-mbl-mbl-mbl.jpg" alt="overview of building" />

Это будет просто добавлять -mbl Снова и снова, пока изменение размера не прекратится, также не работает функция загрузки, что является странным. (Может быть, я не могу целиться $(window) для загрузки, я все еще новичок в сценариях)

Я пытаюсь сделать это гибким, добавив -mbl до конца каждого изображения можно сократить время загрузки, но я не могу понять, как это остановить.

Вот мой JQuery в настоящее время:

var orgSrc = $('img').attr('src');

$(window).on('load resize', function() { // Resize/load function to change images for mobile phones
    var imgSrc = $('img').attr('src'), // Snags the img's src
        imgPaths = [ 'jpg', 'png', 'gif', 'svg' ], // Array of image types
        mobileImg = imgSrc.match(/[^\.]+/) + '-mbl.' + imgPaths[0]; // Dynamically makes the new src for mobile sites

    if ($(window).width() < '800') {
        $('img').attr('src', mobileImg); // If is true then replace with new url
    }
    else {
        $('img').attr('src', orgSrc); // If is not true then replace with old
    }
});

Наконец, скрипка: Демо

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

Answer 1

Вы можете указать флаг true/false для фактического изменения размера. Что-то вроде этого:

var orgSrc = $('img').attr('src');

$(window).on('load resize', function() { // Resize/load function to change images for mobile phones
    var imgSrc = $('img').attr('src'), // Snags the img's src
        imgPaths = [ 'jpg', 'png', 'gif', 'svg' ], // Array of image types
        mobileImg = imgSrc.match(/[^\.]+/) + '-mbl.' + imgPaths[0], // Dynamically makes the new src for mobile sites
        hasResized = false;

    if(!hasResized) {
        if ($(window).width() < '800') {
            $('img').attr('src', mobileImg); // If is true then replace with new url
            hasResized = true;
        }
        else {
            $('img').attr('src', orgSrc); // If is not true then replace with old
        }
    }    
});

Это сделало бы так, что ваш атрибут изменяется только один раз, и тогда вы заблокированы этим изменением. Возможно, вам придется стать немного более креативным, если вам нужно будет снова запускать проверки.

Надеюсь это поможет!