使用 Jquery 调整窗口大小后更改图像答案

【问题标题】：Change image after window resize with Jquery使用 Jquery 调整窗口大小后更改图像
【发布时间】：2014-09-01 06:42:42
【问题描述】：

我在使用 Jquery 代码时遇到了一些问题。我想根据窗口宽度更改页面上的图像...

下面的代码几乎是我想要的，但有一个错误 - 它预先添加了不止一张图像......在我重新调整浏览器大小后它会产生越来越多的克隆。

如果您能给我任何帮助，我将不胜感激。

这是我的代码

(function ($) {
    var $window = $(window),
        $img2 = $('#img2');
    $img4 = $('#img4');

    function resize() {
        if ($window.width() < 750) {
            $img2.remove()
            $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>')
        } else if ($window.width() > 750) {
            $img4.remove()
            $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>')
        }
    }

    $window.resize(resize)
        .trigger('resize');
})(jQuery);

【问题讨论】：

注意：除非您的代码位于 body 元素的底部，否则使用 jQuery IIFE 语法 (function($){})(jQuery); 不如使用此快捷方式 DOM 就绪事件处理程序安全：jQuery(function($){YOUR CODE HERE});跨度>
请提供带有示例 HTML 的 JSFiddle 以减轻我们的痛苦 :)

标签： jquery image window width prepend

【解决方案1】：

如果图片在同一个地方，而你实际上只是想替换它们，你可以只拥有一张图片并更改来源：

var $window = $(window),
    $img = $('#img');

function resize() {
    if ($window.width() < 750) {
        $img.attr('src', 'img/illu4.jpg');
    }
    else if ($window.width() > 750) {
        $img.attr('src', 'img/illu2.jpg');
    }
}

另一个更好的选择是根据需要隐藏/显示它们：

var $window = $(window),
    $img2 = $('#img2');
    $img4 = $('#img4');

function resize() {
    if ($window.width() < 750) {
        $img2.hide()
        $img4.show()
    } else if ($window.width() > 750) {
        $img2.show()
        $img4.hide()
    }
}

【讨论】：

谢谢，这正是我所需要的。感谢大家的有用回复。

【解决方案2】：

您需要将$img2 & $img4 选择器放入 resize 事件函数中：

jQuery(function ($) {
    var $window = $(window);

    function resize() {
        var $img2 = $('#img2');
        var $img4 = $('#img4');
        if ($window.width() < 750) {
            $img2.remove()
            $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>')
        } else if ($window.width() > 750) {
            $img4.remove()
            $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>')
        }
    }

    $window.resize(resize)
        .trigger('resize');
});

当您删除它们时，您的引用会被破坏，并且在后续删除时会在 DOM 中留下任何新图像。

注意：我还将 IIFE 语法 (function($){YOUR CODE HERE})(jQuery); 切换为更安全的 DOM 就绪快捷格式：jQuery(function($){YOUR CODE HERE});。

正如Banana 建议的那样，您最好不要创建和删除，而是隐藏/显示/重用图像，但这只是为了回答您的代码的实际问题:)

【讨论】：

【解决方案3】：

function resize() {
    if ($window.width() < 750) {
        $img2.remove()
        $img4 = $('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg"  width="100%"/>').prependTo('.illu');
    } else if ($window.width() > 750) {
        $img4.remove()
        $img2 = $('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg"  width="100%"/>').prependTo('.illu');
    }
}

你可以试试这样的。在调整正文大小时，您正在丢失引用。

【讨论】：