Изменение размера окна jQuery не работает на iOS - PullRequest
Новая
       8

Изменение размера окна jQuery не работает на iOS

1 голос
/ 06 сентября 2011

Сайт, над которым я работаю, зависает при изменении ориентации, которая подпадает под функцию изменения размера. После большой переписки он будет работать с событием resize, перемещенным за пределы плагина. Это привело к другому нежелательному поведению, поэтому оно не идеально.

Есть идеи, почему он застревает? Другие плагины, о которых я знаю, такие как Supersized, запускаются через doc ready, загружаются и изменяют размер аналогичным образом без зависания. Так что я знаю, что, вероятно, есть небольшая деталь о том, как я написал это, что вызывает его.

Спасибо за вашу помощь!

Тестовая площадка: http://brantley.dhut.ch/

JavaScript:

Подключи- 

(function( $ ){
    $.fn.respond = function(callback) {

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {
            return pic.each(function() {

            /* declare variables */
                var browserWidth = $(window).width();
                var imgRatio = $(this).width() / $(this).height()
                var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
                var browserRatio = browserWidth / availableHeight

                /* image sizing logic */
                if (browserRatio >= imgRatio) {
                    if (browserWidth > 640) {
                        /* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
                        $(this).height(availableHeight).width('auto');
                        //$('body').css('background', 'blue');
                    } else {
                        /* it's mobile */
                        $(this).width(browserWidth - 40).height('auto');
                        //$('body').css('background', 'red');
                    }
                } else {
                    /* if the browser is portrait, set the image's width to fill the page */
                    $(this).width(browserWidth - 40).height('auto');
                    //$('body').css('background', 'green');
                }

                /* horizontally center content */
                $(this).css('margin-left', (browserWidth - $(this).width())/2);

            });

        };
        callback();     
    };
})( jQuery );

Execution- 

$(document).ready(function() {

    /* run respond and hide the main images */
    $('.z').respond(function() {
        $('.z').hide();
    });

});
...