jQuery中的图像替换

Question

我不能让它做我想做的事！我正在尝试用较小的图像替换移动浏览器的大图像。

代码如下：

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
    } else {
        $("img").each(function(){
            if ($(this).hasClass('mobile')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('mobile').addClass('big');
            }
        });
    }
};

对于第一张图片，此代码运行良好。不幸的是，所有其他图像的 SRC 都被重写为第一张图像的 SRC。它们都变成了相同的图像；可以很好地调整大小，但不是正确的图像。

我做错了什么？我在this thread 中尝试了几乎所有关于此的变体，但均未成功。

Answer 1

离开休息一下，然后回来发现我一直在通过刷新和刷新服务器上的过期副本而不是我在本地主机上编辑的副本来测试我的代码。

对不起！我工作太久了。

这是代码的工作版本：

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var oldSrc = $(this).attr('src');
                var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(oldSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
    } else {
        $("img").each(function(){
            if ($(this).hasClass('mobile')) {
                var oldSrc = $(this).attr('src');
                var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc.replace(/([^.]*)-m/, "$1") + '.' + /[^.]+$/.exec(oldSrc));
                $(this).removeClass('mobile').addClass('big');
            }
        });
    }
};

js_imgs();

$(window).resize(function($){
    js_imgs();
});

这是为即时切换窗口大小而编写的，这几乎可以肯定是完全没有必要的。也许在高分辨率 iPhone 或平板电脑上从纵向切换到横向时，额外的代码可能是值得的；我将不得不做一些测试。

关于即时切换的价值的改进和改进非常受欢迎。

Answer 2

首先我会简化功能，不值得验证你是否在移动，因为你第一次进入页面时，它会验证它是否足够大。

应该是这样的：

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
};

尽管如此，这项工作在服务器端可以做得更好，有一个很棒的脚本可以用不同的服务器语言（asp.net、php...）来检测它是否是移动设备：

detectmobilebrowser.com/

另一件事，我不太确定宽度 (600) 是否太大，我会使用 350px，在移动设备上尝试 facebook，它适用于这些尺寸。