Замена изображения в jQuery - PullRequest
Новая
       10

Замена изображения в jQuery

1 голос
/ 21 октября 2010

Я не могу заставить это делать то, что хочу!Я пытаюсь заменить большие изображения на меньшие для мобильных браузеров.

Вот код: 

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 первого изображения.Все они превращаются в одно и то же изображение;которые прекрасно изменяют размер, но не являются правильным изображением.

Что я сделал не так?Я попробовал почти все варианты этого в этой теме , но безуспешно.

Ответы [ 2 ]

1 голос
/ 21 октября 2010

Ушел отдохнуть, потом вернулся и обнаружил, что я тестировал свой код, обновляя и обновляя устаревшую копию на сервере вместо той, которую я редактировал на 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 или планшете с высоким разрешением, дополнительный код может быть полезен;Мне придется провести некоторое тестирование.

Улучшения и комментарии о достоинствах переключения на лету более чем приветствуются.

0 голосов
/ 21 октября 2010

Во-первых, я бы упростил функцию, не стоит проверять, находитесь ли вы в мобильном телефоне, потому что при первом входе на страницу она проверяет, достаточно ли она велика или нет.

Это будеткак это: 

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 на мобильномЭто работает для этих размеров.

...