jQuery data () и resize () для изменения атрибута src - PullRequest
Новая
       35

jQuery data () и resize () для изменения атрибута src

1 голос
/ 21 августа 2011

Я работаю над сценарием, использующим функцию jQuery data () и атрибуты данных HTML5 для динамического переключения атрибута src изображения на основе медиазапроса. Идея заключается в том, чтобы по умолчанию показывать изображение в формате lo-fi (оптимизированное для мобильных устройств) и использовать изображение hi-fi для больших экранов. (Это не обязательно ограничивается изображениями.) Скрипт работает на 100% в Chrome / Opera / Safari / iOS, но не полностью в FF и IE. 

<img src="ex1_lo-res.png" data-websrc="ex2_hi-res.png" alt="example">
<img src="ex2_lo-res.png" data-websrc="ex2_hi-res.png" alt="example">

A живой пример из этого используется responsesetheme.com , где выше 480px в ширину, изображение должно быть розовым, а ниже 480px в ширину, оно должно быть желтым. Я знаю, что data() и Modernizr.mq поддерживаются в FF и IE - я тестировал их без функции resize(). Поэтому я думаю, что проблема связана с триггером или функцией each() или resize(). Есть идеи о том, что мне не хватает? 

jQuery(document).ready(function($) {
    /* get elements that have a data-websrc attribute */
    $websrc = $('[data-websrc]');   

    $websrc.each(function() {   
        /*
        Set data-osrc equal to element's original src value.
        This allows us the ability to access the original src
        (even after we replace the attribute).
        */
        var $this = $(this);    
        $this.data('osrc', $this.attr('src'));
    });             

    $(window).resize(function() {
        /*
        Check breakpoint. 
        (Modernizr.mq checks the media query and returns boolean.)
        */
        airsrcWEB = Modernizr.mq('screen and (min-width:480px)');

        /*
        Replace src with data-websrc (if above breakpoint). 
        Otherwise fallback to data-osrc (original src).
        */
        $websrc.each(function() {           
        var $this = $(this);    
            var src = ( window.airsrcWEB ) ? $this.data('websrc') : $this.data('osrc');
            $this.attr('src', src);
        });                 
    }).resize(); // trigger resize handlers
});

Кроме того, я не был уверен относительно того, у меня есть функции наиболее эффективным способом, насколько это было внутри, поэтому я также хотел бы услышать любые советы для ускорения этого. =)

Обновление 1 : я тоже пробовал с троичным вот так и все та же проблема: 

var src = ( airsrcWEB ) ? $this.data('websrc') : $this.data('osrc');

Обновление 2 : Я выяснил проблему с FF. Очевидно, что размер окна FF6 не изменится ниже ширины около 556 пикселей. Я протестировал скрипт с точкой останова выше этого, и переключатель работал. (Даже примеры на mediaqueri.es не будут уменьшаться ниже 556 пикселей в ширину в FF6.)

1 Ответ

0 голосов
/ 22 марта 2012

Вы уже узнали, что FF имеет минимальный размер окна.Я не знаю точного значения, но я считаю, что это процент от изначально доступной ширины области просмотра.Это ограничение XUL, языка, на котором был написан FF.

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

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

...