Заменив расширения изображений в jQuery, переходите от .png к .gif на лету - PullRequest
Новая
       28

Заменив расширения изображений в jQuery, переходите от .png к .gif на лету

3 голосов
/ 21 июля 2010

Итак, я использую CSS3 для создания боковых панелей в дизайне моего сайта, это работает красиво и модно. Использование http://css3pie.com для создания эффекта в IE.

Опять, мило и модно. Теперь моя проблема -

Для каждого относительно позиционированного модуля внутри него есть иконка с абсолютным позиционированием, которая установлена ​​на вершину: -20px, чтобы придать ему эффект всплывающего окна. Очевидно, что это не работает в IE6, а также не подходит для любых кодов исправлений PNG.

Однако для пользователей IE6 я могу вместо этого переключиться на низкокачественный gif, и они могут с этим справиться.

Теперь мой вопрос: как мне управлять live-switch image.png на image.gif, если пользователь использует IE6?

Мне еще предстоит найти разумное решение для этой идеи. Я мог бы использовать таблицу стилей IE6 для замены изображений - однако есть несколько случаев, когда изображения не должны основываться на CSS. Они должны быть правильными изображениями.

Есть предложения? Я хотел заменить jQuery, но я также не нашел разумного решения для этого.

Ответы [ 4 ]

8 голосов
/ 21 июля 2010

Есть несколько решений.Вероятно, проще всего было бы создать функцию jQuery, которая вызывается, когда пользователь переключается на сайт с низким уровнем доступа (по ссылке), или вы определяете это от его имени (по заголовкам или условным комментариям).

JQueryФункция может использовать селекторы атрибутов, чтобы сделать жизнь проще. 

function switch_to_low_fi() {
        $('img[src$=".png"]').each(function(index,element) {
          element.src = element.src.replace('.png','.gif');
        });
}

Чтобы переключать фоны CSS, я бы рекомендовал классифицировать их с помощью degrade или чего-то подобного, чтобы создать ловушку для jQuery, а затем сделать что-то подобноекак указано выше. 

        $('.degrade').each(function(index,element) {
          element = $(element);
          var background = element.css('background-image');
          background = background.replace('.png','.gif');
          element.css('background-image', background);
        });

Конечно, вам нужно будет изменить приведенный выше код на основе разметки, но это должно помочь вам начать работу.

0 голосов
/ 21 июля 2010

Хотите узнать, как заменить элементы или как получить браузер / версию?

jQuery имеет возможности для обоих.

Получить браузер просто. просто используйте jQuery.browser.

Для изменения изображений потребуется другой подход для CSS по сравнению с <img>. Установите все, чтобы использовать PNG, а затем сделайте что-то вроде: 

if ( useGIF() ) {
    var src;
    $('img').each(function() {
        src = $(this).attr('src');
        $(this).attr('src', src.substr(0, src.length-3) + 'gif');
    };
    $('.has_bg_png').each(function() {
        src = $(this).css('background-image');
        $(this).css('background-image', src.substr(0, src.length-3) + 'gif');
    };
}
0 голосов
/ 21 июля 2010

Вы можете использовать этот код PHP в CSS, чтобы узнать, какой браузер используется: 

<?php
$useragent = $_SERVER[‘HTTP_USER_AGENT’]);
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘IE’;
    echo ... ;//css selector for Internet Explorer and so on...
} elseif (preg_match( ‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Opera’;
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Firefox’;
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Safari’;
} else {
// browser not recognized!
$browser_version = 0;
$browser= ‘other’;
}
?>
0 голосов
/ 21 июля 2010

Это должно работать для всех не-CSS изображений на странице: 

// when DOM is loaded
jQuery(document).ready(function(){
    // and browser is MSIE 6 or lower
    if (jQuery.browser.msie && jQuery.browser.version <= 6) {
        // go through every IMG
        jQuery('img').each(function(index,element){
            // if there's a .png in the source, I'll assume it's at the end
            // (of course, more complex test could be made) ...
            if (element.src.indexOf('.png') != -1) {
                // ...and replace it with a GIF version
                element.src = element.src.replace('.png','.gif'); 
            }
        });
    }
});
...