функция jquery css не работает при обновлении страницы

0

Я пытаюсь получить отношение размеров изображения, используя следующий код jquery:

$(document).ready(function(){
    aspectRatio = parseInt( $('img.sample_image').css('width') ) + ':' +
    parseInt( $('img.sample_image').css('height') ); 
    ...

Этот код отлично работает при загрузке страницы. Однако иногда, когда я обновляю страницу в Crome, используя ctrl-R или кнопку обновления, соотношение сохраняется как 0: 0.

Как я могу это исправить?

  • 1
    попробуйте $ (window) .load (function () {
  • 0
    @Neo Объяснение, почему было бы хорошо ... Если ОП пытается, и это работает, они ничему не научились ...
Показать ещё 4 комментария
Теги:
image
width
height

4 ответа

1
Лучший ответ

Попробуйте вместо этого использовать:

$(window).load()

См. Сравнение двух событий здесь:

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Поделиться
  • 0
    Задача решена! Спасибо за ссылку.
1
  • Событие $.ready будет срабатывать, как только DOM будет готов, не дожидаясь загрузки изображений.
  • $.load будет $.load после $.load всех ресурсов (например, CSS и изображений)

Поэтому ваш код запускается до загрузки изображений (и, следовательно, вы не можете знать их размер), но он работает иногда, потому что они, возможно, были кэшированы. Нажатие Ctrl+R может очистить кэш и снова вызвать проблему.

Как и другие, вы должны дождаться события $.load чтобы убедиться, что ваше изображение закончило загрузку.

Поделиться
1

это может помочь вам

$(window).load(function(){
    aspectRatio = parseInt( $('img.sample_image').css('width') ) + ':' +
    parseInt( $('img.sample_image').css('height') );
    ...
Поделиться
1

Я думаю, что ваш вызов css ('width') предоставляет строку с указанными единицами, а parseInt не будет оценивать, как вы ожидаете.

В общем, я бы рекомендовал перейти к самому изображению, а не к его CSS, чтобы захватить высоту и ширину:

var height = $('img.sample_image')[0].clientWidth;

так

var elem = $('img.sample_image')[0];
var aspectRatio = elem.clientWidth.toString() + ":" + elem.clientHeight.toString();

[0] захватывает первый элемент dom из объекта jquery.

В качестве альтернативы используйте функции jquery .width() и .height() вместо .css():

var aspectRatio = $('img.sample_image').width().toString() + ':' + $('img.sample_image').height().toString()
Поделиться
  • 0
    Я не использовал [0] в jquery раньше, спасибо за совет! Я протестировал оба ваших метода, и они возвращают правильную информацию, но все еще существуют проблемы, связанные с обновлением страницы Chrome. Метод [0] .clientWidth не всегда работает при обновлении (50% успеха.) Метод .width () никогда не работает при обновлении.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню