#jquery #if-statement #conditional #tumblr
#jquery #оператор if #условный #tumblr
Вопрос:
РЕДАКТИРОВАТЬ: я поместил это в готовую к документу функцию. Однако изображения большие, соответствует ли document ready большим изображениям? вы можете видеть, что это не работает здесь: http://syndex.me
Это тихо сводит меня с ума.
var maxxxHeight = $(window).height();
$(".theImage").children('img').each(function() {
myHeight = $(this).height();
if ( myHeight > maxxxHeight ){
$(this).next().text("Browser " maxxxHeight " image height " myHeight);
};
});
По какой-то причине,
myHeight> maxxxHeight ничего не даст. Есть изображения, размеры которых больше, а некоторые нет. Изображения не устанавливаются CSS. Их ширина и высота фактически ни в какой момент не указаны.
Как это может быть? Это совершенно новый вопрос, но я делал if и < / > миллион раз раньше.
Спасибо
Ответ №1:
Я могу придумать несколько причин, по которым это может произойти.
- Изображения могут быть еще не полностью загружены во время выполнения кода.
- Ваши изображения могут не быть прямыми дочерними элементами элемента, соответствующего вашему классу.
- Возможно, ваш код выполняется до загрузки документа, и еще ничего не соответствует классу.
Мое лучшее предположение (1), и в этом случае вам следует добавить обработчик загрузки для изображений, который делает то, что вы хотите, когда изображение завершает загрузку. Выполнение кода как при загрузке документа, так и при загрузке изображения, вероятно, необходимо в случае, если изображение кэшируется и событие загрузки для него срабатывает до применения обработчика загрузки изображения. Загрузка изображения будет необходима, если изображение заменяется динамически после загрузки документа.
ПРИМЕЧАНИЕ: вы должны определять область myHeight локально, чтобы избежать загрязнения глобального пространства имен (и потенциальных ошибок из-за проблем с областью видимости).
$(document).load( function() {
var maxxxHeight = $(window).height();
$(".theImage").children('img').each(function() {
$(this).load( function() { // only if images can be loaded dynamically
handleImageLoad(this);
});
handleImageLoad(this);
});
function handleImageLoad(img)
{
var $img = $(img), // declare local and cache jQuery for the argument
myHeight = $img.height();
if ( myHeight > maxxxHeight ){
// this is where your real code would go to make adjustments, etc.
$img.next().text("Browser " maxxxHeight " image height " myHeight);
};
}
});
Комментарии:
1. Я исправил эту область видимости var. Я получаю высоту изображения, равную «0». Я просто не понимаю, почему это может быть. В моем css теперь у меня есть height и width для img { как «auto».
2. @RGBK если изображение еще не загружено при выполнении кода, элемент не имеет высоты. Попробуйте запустить код при загрузке документа вместо document ready.
$(document).load( function() { ... } );3. Хорошо, но на самом деле, я должен затем посмотреть на высоту загружаемого div, который должен иметь представление о том, насколько он будет большим, если он знает, насколько большим будет изображение? Разве их метаданные не относятся к изображению, и мне не нужно указывать их для каждого изображения, встроенного или с помощью css?
4. Не может быть, чтобы браузер знал, насколько велико изображение, только после того, как оно загрузило все эти пиксели ?!
5. @RGBK у DIV не будет размера (если вы его не установите), пока не будет загружено его содержимое. Браузер не знает, насколько велико изображение, пока оно не будет отображено (метаданные могут лгать), если вы не укажете это, а затем он будет масштабировать изображение в соответствии с вашим размером.
Ответ №2:
Вам нужно выполнить некоторую отладку. Поскольку сравнение не выполняется, проверьте значения myHeight и maxxxHeight, распечатав их на консоли. Я гарантирую, что одно из этих двух не является числом. На самом деле, один, вероятно, будет неопределенным.
И вы помещаете свой код jQuery в $(document).ready() вызов?