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

离开休息，然后回来发现我通过刷新和刷新服务器上的过时副本而不是我在localhost上编辑的副本来测试我的代码。

抱歉！我工作太久了。

以下是代码的工作版本：

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，它适用于这些尺寸。

jQuery中的图像替换

2 个答案: