Я пытаюсь получить отношение размеров изображения, используя следующий код jquery:
$(document).ready(function(){
aspectRatio = parseInt( $('img.sample_image').css('width') ) + ':' +
parseInt( $('img.sample_image').css('height') );
...
Этот код отлично работает при загрузке страницы. Однако иногда, когда я обновляю страницу в Crome, используя ctrl-R или кнопку обновления, соотношение сохраняется как 0: 0.
Как я могу это исправить?
Попробуйте вместо этого использовать:
$(window).load()
См. Сравнение двух событий здесь:
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
$.ready
будет срабатывать, как только DOM будет готов, не дожидаясь загрузки изображений.$.load
будет $.load
после $.load
всех ресурсов (например, CSS и изображений) Поэтому ваш код запускается до загрузки изображений (и, следовательно, вы не можете знать их размер), но он работает иногда, потому что они, возможно, были кэшированы. Нажатие Ctrl+R
может очистить кэш и снова вызвать проблему.
Как и другие, вы должны дождаться события $.load
чтобы убедиться, что ваше изображение закончило загрузку.
это может помочь вам
$(window).load(function(){
aspectRatio = parseInt( $('img.sample_image').css('width') ) + ':' +
parseInt( $('img.sample_image').css('height') );
...
Я думаю, что ваш вызов 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()