Как вычислить разницу между размером фотографии и размером экрана браузера JQuery?

Question

[Роман Денискин]

Приветствую друзья! Не сказать, чтобы я был новичком в JS, но знаю я его плохо. Сейчас появилась задача выяснить размер картинки и размеров окна браузера (читай размер div т.к. картинка должна распологаться во весь экран, а та сторона что не влезет должна ездить туда-сюда). Реализовал такое вот решение (код урезал, полную версию кода можно посмотреть тут):

var widthImage = $(this).width();
    var heightImage = $(this).height();
	var doc_w, doc_h;
		$(".backgroundImage").css("width", "100%");
		doc_h = $(document).width();
		var difference = heightImage - doc_h;//Получаем остаток не вошедший в экран в пикселях
		if (difference > 1)
		{
			for (var i = difference; i > 1; i -= 1)
			{
				$(".testClass").text("Width: " + widthImage + " height: " + heightImage + " screenWidth " + doc_w + " screenHeight " + doc_h + " difference: " + difference);
				$("#scene").animate({top: '-=1px'}, 1);
			}
		}

Проблема в том, что вычисляются фактические размеры картинки, но они абсолютно не меняются при изменении размера браузера (что логично). Но картинка всегда подстраивается под окно при помощи css и её ширина = 100%. Как мне получить не фактический размер картинки, а размер её обёртки который равен 100% ширины х Пропорциональная высота? Для лучшего понимания о чём речь вот пример того, что я сделал.

Comments

[Дмитрий]

На ipad картинка с каждым движением становится меньше и меньше)

[Роман Денискин]

Дмитрий: она уезжает... А нужно, чтобы ездила взад - вперёд.

Answer 1

[Константин Громов]

Набросок: jsfiddle.net/0hwrb4he. Надо ещё доработать функцию updatePrimaryDirection, чтобы правильно работала с вертикально-ориентированными изображениями; проверить как работает в IE9; обработать ситуацию когда пропорции контейнера и изображения почти равны и анимация становится очень дёрганной, и подобные мелочи.

Comments

[Роман Денискин]

Вау, огромное вам спасибо! Буду разбираться в коде)

[Роман Денискин]

А не подскажите, что гуглить чтобы убрать дёрганье и изменение размера экрана? Как эти темы называются?

[Константин Громов]

Роман Денискин: jsfiddle.net/0hwrb4he/1 Без дёрганья, если похимичить, можно сделать зависимость скорости сдвига от разницы пропорций по схожему принципу. Что вы имели ввиду под размером экрана я не понял.

[Роман Денискин]

Константин Громов: большое вам спасибо) Я сперва не изменил размер окна и думал, что скрипт никак не реагирует на изменения окна, но он реагирует. Вопрос по поводу размера экрана исчерпан. Могу ли я задавать вам тут вопросы, по работе скрипта если что то будет не понятно? Хочу разобраться как он функционирует.

[Константин Громов]

Роман Денискин: Вполне.

[Роман Денискин]

Константин Громов: не подскажете, а по какому принципу происходит зацикливание выполнения скрипта? В моей версии зацикливания не было, картинка просто пробегала и останавливалась. И ещё вопрос: на некоторых браузерах картинка получается статичной. Да и в моём он время от времени выдаёт просто страницу с растянутой картинкой. Почему это происходит и как с этим справляться?

[Константин Громов]

Роман Денискин: setInterval(function() {/***/}, 20) и внутри него определяется в какую сторону надо сдвигать картинку перед, непосредственно, самим сдвигом. Статичной может быть либо потому, что соотношение пропорций близко к 1 и сдвиг отменяется, либо браузер не воспринимает программный scrollTop/scrollLeft у элемента с overflow: hidden. Во втором варианте я сомневаюсь, но если проблема именно в способе сдвига, надо просто изменить scroll на margin, но это потребует лишнего кода.

[Роман Денискин]

Константин Громов: большое спасибо за ответы) По поводу движения всё оказалось намного прозаичнее, у клиента был отключен js) Но сейчас выяснилась другая проблема. Пока грузится картинка сайт не движется, это понятно, но бывает так, что при перезагрузке страницы скрипт просто останавливается. Почему это может происходить?

[Константин Громов]

Роман Денискин: Консоль на это ответит лучше меня. Вероятно jQuery не догружается.

[Роман Денискин]

Константин Громов: консоль молчит. Такое впечатление что файл скрипта просто не загружается

[Константин Громов]

Роман Денискин: Тестируйте, что работает, а что нет. Мне бессмысленно гадать вслепую.

[Роман Денискин]

Константин Громов: ещё один вопрос возник. А как вы в своём скрипте обновляете размер картинки? Я вижу вы вызываете функцию setInterval() и в ней вычисляете положение картинки, а функция $(window).on("load resize") обновляет экран при изменении размера экрана, но вот что не понятно: я делаю слайдер чтобы переключать картинки, до этого я в теге img менял атрибут src и всё работало, но переключение было долгим и к тому же мне понадобилось сделать динамическое пролистывание. Я решил сразу же показать все картинки, но первую картинку сделать видимой, другие же спрятать с помощью display: none; При переключении первая картинка прячется display: none;, а последующая показывается display: block; так же у текущей картинки появляется атрибут id="currImage". Эффект такого пролистывания меня удручает. Пролистывание стало конечно быстрым, но размеры не считаются как положено. Пытался вызвать из своего скрипта вышеуказанные функции вашего скрипта, выдаётся ошибка, что функция не найдена, хотя мой скрипт вызывается после вашего. Как решается эта проблема? Понимаю, что что то простое, но что понять не могу... Вот ссылка на сайт: paper.bl.ee

[Константин Громов]

Роман Денискин: CSS подстраивает размер, я лишь меняю width="100%" на height="100%" в зависимости от primaryDirection. Функция из моего скрипта не вызывается потому, что она определена в другой области видимости и доступна только из неё. Чтобы размеры учитывались нужно при смене изображения обновлять переменную image и в моём скрипте.

[Роман Денискин]

Константин Громов: спасибо за ответ. К сожалению ссылку дал не ту. Я отлаживал на хостинге, а он упал часа 2 назад. Теперь скрипт тут: blog.find-out.org/test
Постараюсь вернуть работоспособность и опишу проблему уже на примере. Если коротко, то перестала работать функция подставляющая 100% ширины/высоты при изменении фото.

[Роман Денискин]

Константин Громов: починил скрипт. Из-за хостера пропала последняя версия, пришлось восстанавливать. Вообщем проблема в том, что при нажатии на стрелочку, новое изображение отображается по размерам старого... Попробуйте. Вот ссылка: blog.find-out.org/test
Какую функцию вызвать для принудительного ресайза изображения?

[Константин Громов]

Роман Денискин: Так я уже писал, что скрипт работает со старым изображением, хотя на экране уже новое. Нужно и скрипт направить на работу с новым изображением. jsfiddle.net/awkxyepg вот то, что вам нужно в модульном подходе. Мой изначальный пример был написан простынёй под конкретные условия, такой код сложно развивать. В этом же случае такая проблема почти отсутствует, но не понимая как работают прототипы с конструкторами не получится и разобраться в самом скрипте. Так что сомнительно стоит ли вам использовать эту наработку, пока не разберётесь целиком.

[Роман Денискин]

Константин Громов: посоветуйте пожалуйста книги по изучению JS и Jquery, а то я пользоваться языком умею, а базовых вещей не знаю... За решение задачи огромное спасибо) Выручили.

[Константин Громов]

Роман Денискин: https://learn.javascript.ru целиком. Когда уложится - "JavaScript. Подробное руководство" Флэнагана. После этого уже идти в сторону организации проекта: паттерны, построение архитектуры.

[Роман Денискин]

Константин Громов: спасибо) А это не слишком высокий уровень? Дело в том, что я хотел бы стать профессиональным backend-программистом, frontend мне нужен для уверенной вёрстки, не более и создания подобных скриптов.

[Константин Громов]

Роман Денискин: Тогда может хватить первой ссылки. И не помешает тогда читать целенаправленно про jQuery.

[Роман Денискин]

Константин Громов: большое спасибо, буду осваивать) Посмотрел сейчас на разницу первого и второго ваших скриптов - она колоссальная. Хотя до этого для того, чтобы переключать слайд я использовал изменение атрибута src. Проблема в том, что изменяя атрибут невозможно достичь плавного перемещения картинки (что я в будущем буду стараться сделать) и на загрузку картинки требуется какое то время. Хотя работает всё так же

[Роман Денискин]

Константин Громов: не подскажите, возможно ли в ваш скрипт добавить вот такой эффект между переключением кадров: karimrashid.com/overview#karimanifesto ?

[Константин Громов]

Роман Денискин: jsfiddle.net/awkxyepg/1 С другими правками кода вам придётся самому разбираться, у меня уже не хватает свободного времени. Парой слов тут не объяснишь, если всё в целом непонятно.

[Роман Денискин]

Константин Громов: хорошо, всё равно спасибо за помощь

Answer 2

[Максим Софронов]

Как мне получить не фактический размер картинки, а размер её обёртки который равен 100% ширины х Пропорциональная высота?

Попробуйте обернуть картинку блоком с display: inline-block и находить через js ширину и высоту этого блока.

Comments

[Роман Денискин]

Попробовал, не помогает...

[Максим Софронов]

Роман Денискин: помогает jsfiddle.net/maxsof/a3xqw85f

[Роман Денискин]

maxsof: но при изменении окна размер же не меняется...

[Максим Софронов]

Роман Денискин: при ресайзе окна запускайте пересчет еще раз jsfiddle.net/maxsof/a3xqw85f/1

[Роман Денискин]

maxsof: большое спасибо, помогли)

[Максим Софронов]

Роман Денискин: отметьте как решение, пож-та?)

[Роман Денискин]

maxsof: не вопрос)

Answer 3

[frees2]

Проценты пропишите, пример как меняется, вместо картину ифрем. dulsky.eu/v

$(document).ready(function()  
{ $('#player').height($('#player').width()/1.7589879); $(window).resize(function(){
$('#player').height($('#player').width()/1.7589879);});  var bodyHeight = $('body').height();	var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight){$('#player').css({'bottom':'16%'});} ;{$('#t').css({'bottom':'40%'} );}    ;{$('#ms').css({'bottom':'2%'} );};{$('#draggable66').css({'bottom':'1%'} );}
});

Comments

[Роман Денискин]

Вставить картинку в айфрейм? На странице предпологается делать несколько картинок. Это точно лучшее решение? Да и не возникнет ли с айфреймом проблем?