jquery data () метод не всегда работает? - PullRequest
Новая
       23

jquery data () метод не всегда работает?

1 голос
/ 18 декабря 2010

У меня действительно серьезные проблемы с созданием надежного кода jquery, который изменяет размеры изображений до ширины родительского элемента div. иногда это работает, иногда просто нет. сначала я думаю, что IE просто вызывает у меня проблемы, однако бывают случаи, когда safari, firefox или chrome не запускают и мой метод. 

    $(".post-body img").each(function() {  
        $(this).data('width', $(this).width());
        $(this).data('height', $(this).height());
    });

Я сохраняю ширину и ширину по высоте методом данных в моей функции window.load.

после этого я вызываю функцию setimgwidth (). 

function setimgwidth() {
    var bw = $('.post-body').width();
    $(".post-body img").each(function() {   
            if (bw < $(this).data('width')) {
                $(this).attr( 'width', Math.round(bw) );
                //calculate ratio height
                var newHeight = (bw / $(this).data('width')) * $(this).data('height');
                $(this).attr( 'height', Math.round(newHeight) );
            }
    });
}

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

Я просто не могу понять, почему этот метод не ВСЕГДА работает. Иногда изображения изменяют размер, иногда нет.

Вы видите что-нибудь странное? что-нибудь, что вы бы сделали лучше? какие-то другие методы?

спасибо

редактирование: 

jQuery(function($){//document ready

    $(window).load(function(){

        //Save the original image width
        $(".post-body p img, .post-body .wp-caption img").each(function() {  
            $(this).data('width', $(this).width());
            $(this).data('height', $(this).height());
        });

        //window resize event
        $(window).resize(function() {
            setimgwidth();
        });

        //set image width inside of .post-body
        function setimgwidth() {
            $(".post-body p img, .post-body .wp-caption img").each(function() {
                console.debug($(this).data('width'));
                console.debug($(this).data('height'));
            });
        }

        //call image-resize functions onload
        setimgwidth();

    });

});//document ready

консоль всегда говорит мне, что ширина и высота изображения равна 0.

Ответы [ 2 ]

1 голос
/ 18 декабря 2010

Проверка кода (Это не ответ)

Я повторно проанализировал ваш код.Я полагаю, что теперь это намного более читабельно. 

function setImgWidth() {
    var b = $(".post-body");
    var bw = b.width();

    b.find("img").each(function() {
            var t = $(this);
            var tw = t.data("width");
            var th = t.data("height");

            if ( bw < tw ) {
                t
                    .width(Math.round(bw))
                    .height(Math.round((bw / tw) * th));
            }
    });
}
1 голос
/ 18 декабря 2010

В одном месте вы используете $(this).attr('width');, а в другом - $(this).width().Попробуйте .width() и .height(), которые, как я полагаю, вам следует использовать в обоих местах: 

$(".post-body img").each(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));            
        }
});

Кроме того (возможно, не имеет значения), если вы не устанавливаете ширину и высоту данныхатрибуты для каждого изображения после того, как вы изменили их размеры? 

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));
            $(this).data("width", Math.round(bw));
            $(this).data("height", newHeight);
        }
});

И, наконец, я надеюсь, что вы сохраняете размеры изображения при загрузке, как @Emmett предложил в своем комментарии: 

$(".post-body img").load(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

Помните, чтоwidth() и height() возвращают фактическую ширину и высоту содержимого независимо от свойств CSS, поэтому эти значения должны быть захвачены только после того, как содержимое / изображения или что-либо еще было полностью загружено.

...