Question

我遇到了一些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);

Answer 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()
    }
}

Answer 2

你需要放$img2＆amp; <{1}}选择器在 resize事件函数中：

$img4

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

注意：我还将IIFE语法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就绪快捷方式格式：(function($){YOUR CODE HERE})(jQuery);。

正如jQuery(function($){YOUR CODE HERE});建议的那样，最好不要创建和删除，但隐藏/显示/重用图像，但这只是为了回答代码的实际问题：）

Answer 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');
    }
}

你可以尝试这样的事情。当身体正在调整大小时，你正在失去参考。

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

3 个答案: