Russian Qt Forum

Qt => Qt Script, QtWebKit => Тема начата: Ubuntu_linux от Июнь 04, 2012, 14:08


Название: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 04, 2012, 14:08
Есть страничка html  в которой заданы большие размеры картинок. Но мне надо поменять размеры под необходимое значения. Я написал скрипт и поместил в html  который это все делает, но как его запустить до начала прорисовки изображений?????

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 04, 2012, 19:57
Вот он, но где его запустить, до загрузки изображений?
Код
Javascript
<script type="text/javascript">
 
function countImgs(maxWidth)
 
{
 
   var img = document.images;
 
   for (var i = 0; i < img.length; i++) {
 
      if (img[i].width > maxWidth){
         var coeff=img[i].width/img[i].height;
 
         img[i].width = 350;
         img[i].height=img[i].width/coeff ;
 
                                  }//if
 
   }//for
 
}//func
</script>

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 04, 2012, 20:19
Попробовать это:
Код
Javascript
<script type="text/javascript">
...
window.onload = function() {countImgs(100);}
</script>
 

или jquery подключить, если я правильно понимаю условия задачи

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 12:04
Цитата: alexis031182 от Июнь 04, 2012,  20:19
Попробовать это:
Код
Javascript
<script type="text/javascript">
...
window.onload = function() {countImgs(100);}
</script>
 

или jquery подключить, если я правильно понимаю условия задачи
Так пробывал, но не подходит так как сначала загораются  все картинки, а только  потом происходит ресайз! Мне надо это сделать до загрузки изображений!

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 13:16
Вам по идее тогда подойдёт отложенная загрузка изображений. Но для этого тэг img не должен содержать значения для атрибута src. Далее останется только через яваскрипт подгружать изображения.

Ещё можно попробовать менять атрибуты width и height у изображений (img), но сразу же перед показом страницы. То есть помещаете вызов яваскрипта после кода HTML.

Ещё вариант, делать изображения скрытыми через, например, css (visibility: hidden). Или через тот же js. Кстати, это вариант... Например, в событии onload сделать все изображения скрытыми, изменить их размеры, а затем показать (visibility: visible).

А почему Вы не хотите делать ресайз на стороне сервера? Картинки ведь всё равно с высоким и избыточным разрешением на клиенте выводиться будут.

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 14:38
Цитата: alexis031182 от Июнь 05, 2012,  13:16
....
То есть помещаете вызов яваскрипта после кода HTML.
...

Как? можно пример?

Позже раскажу детали....

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 14:52
Вот ещё вариант: Кроссбраузерное событие onDOMContentLoaded (http://javascript.ru/tutorial/events/ondomcontentloaded)

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 14:56
Цитата: Ubuntu_linux от Июнь 05, 2012,  14:38
Цитата: alexis031182 от Июнь 05, 2012,  13:16
....
То есть помещаете вызов яваскрипта после кода HTML.
...
Как? можно пример?
...
Ошибся. Даже если скрипт внизу разместить, то всё равно сначала картинки загрузятся. Не вариант.

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 16:05
Цитата: alexis031182 от Июнь 05, 2012,  14:56
Цитата: Ubuntu_linux от Июнь 05, 2012,  14:38
Цитата: alexis031182 от Июнь 05, 2012,  13:16
....
То есть помещаете вызов яваскрипта после кода HTML.
...
Как? можно пример?
...
Ошибся. Даже если скрипт внизу разместить, то всё равно сначала картинки загрузятся. Не вариант.
Заработало!!!!
В Firefox  все нормально обрабатывается до полноной загрузки картиок!
Просто разместил вызов скрипта в конце body!
Код
Javascript
<body>
.....
.....
<script>replaceObj();replaceFrame();countImgs(360)</script>
 
</body>


Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 16:15
Цитата: alexis031182 от Июнь 05, 2012,  13:16
Вам по идее тогда подойдёт отложенная загрузка изображений. Но для этого тэг img не должен содержать значения для атрибута src. Далее останется только через яваскрипт подгружать изображения.

Ещё можно попробовать менять атрибуты width и height у изображений (img), но сразу же перед показом страницы. То есть помещаете вызов яваскрипта после кода HTML.

Ещё вариант, делать изображения скрытыми через, например, css (visibility: hidden). Или через тот же js. Кстати, это вариант... Например, в событии onload сделать все изображения скрытыми, изменить их размеры, а затем показать (visibility: visible).

А почему Вы не хотите делать ресайз на стороне сервера? Картинки ведь всё равно с высоким и избыточным разрешением на клиенте выводиться будут.
Вообще то я делаю rss читалку http://keddr.com/feed/ для мобилки Symbian (клиент). Фишка в том, что там статти с полным текстом+картинки+флеш видео размечена по хтмл.... Но картинки там больше и на маленьком экране мобилки не влазят по ширине и чтоб не скролировать в стороны я уменьшаю размер картинок под нужную ширину и заменяю флеш нужной мне картинеой с ссилочкой на видео. 
И вся эта страничка будет отображаться с помочу WebKit (тут все готово, осталось только правильно страничку сформировать)

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 16:37
А как заменить  конструкцию <iframe src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe> на просто картинку?
Метод var obj= document.getElementsByTagName('iframe') что-то не работает...

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 17:48
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:05
Заработало!!!!
В Firefox  все нормально обрабатывается до полноной загрузки картиок!
Просто разместил вызов скрипта в конце body!
Проверьте и в других браузерах.

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 17:58
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:37
А как заменить  конструкцию <iframe src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe> на просто картинку?
Метод var obj= document.getElementsByTagName('iframe') что-то не работает...
Попробуйте через:
Код:
var frame = document.getElementById('myframe');
а во фрейме указать id:
Код:
<iframe id="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>

Или через:
Код:
var frame = window.frames['myframe'];
Код:
<iframe name="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 17:58
Цитата: alexis031182 от Июнь 05, 2012,  17:48
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:05
Заработало!!!!
В Firefox  все нормально обрабатывается до полноной загрузки картиок!
Просто разместил вызов скрипта в конце body!
Проверьте и в других браузерах.
А мне в других браузерах не надо!

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 18:02
Цитата: alexis031182 от Июнь 05, 2012,  17:58
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:37
А как заменить  конструкцию <iframe src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe> на просто картинку?
Метод var obj= document.getElementsByTagName('iframe') что-то не работает...
Попробуйте через:
Код:
var frame = document.getElementById('myframe');
а во фрейме указать id:
Код:
<iframe id="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>

Или через:
Код:
var frame = window.frames['myframe'];
Код:
<iframe name="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>

Дело в том, то нет атрибута id или name, только голий обэкт iframe! Как тут быть?

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 18:06
Цитата: Ubuntu_linux от Июнь 05, 2012,  18:02
Дело в том, то нет атрибута id или name, только голий обэкт iframe! Как тут быть?
Тогда может перебором:
Код:
for (var i = 0; i < window.frames.length; i++) {
    var frame = window.frames[i];
    //Здесь как-нибудь определять нужный, если их много.
}

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 20:50
Не хочет!
Мне надо вместо iframe вставить картинку...

Название: Re: Изменить размер изображений на страничке
Отправлено: alexis031182 от Июнь 05, 2012, 21:26
Цитата: Ubuntu_linux от Июнь 05, 2012,  20:50
Не хочет!
Мне надо вместо iframe вставить картинку...
Не находит? Тогда, если, например, iframe обрамлён в какой-либо ещё тэг, то можно через него попытаться получить iframe:
Код:
var nodes = document.getElementById('mydiv').childNodes;
при:
Код:
<div id="mydiv">
<iframe id="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>
</div>
и далее через цикл как в примере выше.

Элемент можно найти таким способом даже если он глубоко в ветвях DOM.

Название: Re: Изменить размер изображений на страничке
Отправлено: Ubuntu_linux от Июнь 05, 2012, 21:37
Цитата: alexis031182 от Июнь 05, 2012,  21:26
Цитата: Ubuntu_linux от Июнь 05, 2012,  20:50
Не хочет!
Мне надо вместо iframe вставить картинку...
Не находит? Тогда, если, например, iframe обрамлён в какой-либо ещё тэг, то можно через него попытаться получить iframe:
Код:
var nodes = document.getElementById('mydiv').childNodes;
при:
Код:
<div id="mydiv">
<iframe id="myframe" src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe>
</div>
и далее через цикл как в примере выше.

Элемент можно найти таким способом даже если он глубоко в ветвях DOM.

Находит 2 шт, но доступа к src  нету...

Щас попробую childNodes


Powered by SMF 1.1.10 | SMF © 2006, Simple Machines LLC