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。都化作同一个形象；其大小调整得很好，但不是正确的图像。

我做错了什么？我已经尝试了 此线程没有成功。

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在移动设备中，它适用于这些尺寸。