Russian Qt Forum
Сентябрь 24, 2024, 20:25 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
 
  Начало   Форум  WIKI (Вики)FAQ Помощь Поиск Войти Регистрация  

Russian Qt Forum > Forum > Qt > Qt Script, QtWebKit > Изменить размер изображений на страничке
Страниц: [1] 2   Вниз
« предыдущая тема следующая тема »
  Печать  
Автор Тема: Изменить размер изображений на страничке  (Прочитано 11641 раз)
Ubuntu_linux
Гость
« : Июнь 04, 2012, 14:08 »
Есть страничка html  в которой заданы большие размеры картинок. Но мне надо поменять размеры под необходимое значения. Я написал скрипт и поместил в html  который это все делает, но как его запустить до начала прорисовки изображений?Непонимающий?
Записан
Ubuntu_linux
Гость
« Ответ #1 : Июнь 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>
Записан
alexis031182
Гость
« Ответ #2 : Июнь 04, 2012, 20:19 »
Попробовать это:
Код
Javascript
<script type="text/javascript">
...
window.onload = function() {countImgs(100);}
</script>
 

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

или jquery подключить, если я правильно понимаю условия задачи
Так пробывал, но не подходит так как сначала загораются  все картинки, а только  потом происходит ресайз! Мне надо это сделать до загрузки изображений!
Записан
alexis031182
Гость
« Ответ #4 : Июнь 05, 2012, 13:16 »
Вам по идее тогда подойдёт отложенная загрузка изображений. Но для этого тэг img не должен содержать значения для атрибута src. Далее останется только через яваскрипт подгружать изображения.

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

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

А почему Вы не хотите делать ресайз на стороне сервера? Картинки ведь всё равно с высоким и избыточным разрешением на клиенте выводиться будут.
Записан
Ubuntu_linux
Гость
« Ответ #5 : Июнь 05, 2012, 14:38 »
Цитата: alexis031182 от Июнь 05, 2012,  13:16
....
То есть помещаете вызов яваскрипта после кода HTML.
...

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

Позже раскажу детали....
Записан
alexis031182
Гость
« Ответ #6 : Июнь 05, 2012, 14:52 »
Вот ещё вариант: Кроссбраузерное событие onDOMContentLoaded
Записан
alexis031182
Гость
« Ответ #7 : Июнь 05, 2012, 14:56 »
Цитата: Ubuntu_linux от Июнь 05, 2012,  14:38
Цитата: alexis031182 от Июнь 05, 2012,  13:16
....
То есть помещаете вызов яваскрипта после кода HTML.
...
Как? можно пример?
...
Ошибся. Даже если скрипт внизу разместить, то всё равно сначала картинки загрузятся. Не вариант.
Записан
Ubuntu_linux
Гость
« Ответ #8 : Июнь 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>
Записан
Ubuntu_linux
Гость
« Ответ #9 : Июнь 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 (тут все готово, осталось только правильно страничку сформировать)
Записан
Ubuntu_linux
Гость
« Ответ #10 : Июнь 05, 2012, 16:37 »
А как заменить  конструкцию <iframe src="http://www.youtube.com/embed/hF8DFhnYyUE" frameborder="0" width="640" height="360"></iframe> на просто картинку?
Метод var obj= document.getElementsByTagName('iframe') что-то не работает...
Записан
alexis031182
Гость
« Ответ #11 : Июнь 05, 2012, 17:48 »
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:05
Заработало!!!!
В Firefox  все нормально обрабатывается до полноной загрузки картиок!
Просто разместил вызов скрипта в конце body!
Проверьте и в других браузерах.
Записан
alexis031182
Гость
« Ответ #12 : Июнь 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>
Записан
Ubuntu_linux
Гость
« Ответ #13 : Июнь 05, 2012, 17:58 »
Цитата: alexis031182 от Июнь 05, 2012,  17:48
Цитата: Ubuntu_linux от Июнь 05, 2012,  16:05
Заработало!!!!
В Firefox  все нормально обрабатывается до полноной загрузки картиок!
Просто разместил вызов скрипта в конце body!
Проверьте и в других браузерах.
А мне в других браузерах не надо!
Записан
Ubuntu_linux
Гость
« Ответ #14 : Июнь 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! Как тут быть?
Записан
Страниц: [1] 2   Вверх
  Печать  
« предыдущая тема следующая тема »
 
Перейти в:  


Страница сгенерирована за 0.075 секунд. Запросов: 21.