Javascript-форум (https://javascript.ru/forum/)
-   Opera, Safari и др. (https://javascript.ru/forum/css-html-browser/)
-   -   Невыполнение скрипта для уже загруженных картинок в опере (https://javascript.ru/forum/css-html-browser/30113-nevypolnenie-skripta-dlya-uzhe-zagruzhennykh-kartinok-v-opere.html)

Acreator57887 24.07.2012 18:12

Невыполнение скрипта для уже загруженных картинок в опере
 
У меня есть скрипт, который уменьшает изображения и позиционирует их для получения "первью" или демо-картинок.

Выполняется он так:
var $img = $('.demophoto');
$img.load(function (){
// Сам скрипт
});


Проблема в том, что в опере скрипт выполняется только при первой загрузке изображений, после обновления страницы изображения, как я понял, уже загружены в кэш и, опять же как я понял, события Load просто напросто не происходит, соответственно скрипт не выполняется.

Я где-то читал, что эту проблему можно решить trigger-ом, но как? я не понял даже после прочтения инструкции по триггеру. Помогите разобраться))

Весь скрипт

devote 24.07.2012 18:16

$('.demophoto').each(function() {
    var load = function() {
        // Сам скрипт
    }
    if ( this.complete ) {
        load.call( this );
    } else {
        $( this ).load( load );
    }
});

Acreator57887 25.07.2012 10:28

Только хуже стало. В опере осталось по прежнему, а в других браузерах стало глюкать - иногда скрипт не выполняется.
Например в хроме скрипт выполняется после обновления страницы.

devote 25.07.2012 11:39

$('.demophoto').each(function() {
    var img = new Image();
    img.onload = function() {
        // Сам скрипт
    }
    img.src = this.src;
});

Acreator57887 25.07.2012 12:14

devote,

Возможно, оба ваши способа работоспособны, может виноват сам скрипт, я его не сам писал - он с урока, поглядел - там что-то намудрёно, сейчас упростил он заработал и в опере, только немного не так, как нужно.

Если всё заработает - отпишусь.

Acreator57887 25.07.2012 12:29

Да, проблема была именно в скрипте, что уменьшал изображения. Я его упростил, исправил + ваша конструкция - всё работает.

Спасибо))

P.S. Ссылка на весь скрипт осталась прежней - она есть в моём первом сообщении.

Acreator57887 25.07.2012 19:50

Не совсем проблема решилась... :(

Ваша конструкция работает, но не работает внутри неё var imgs = $(this);
А нужно именно this, так как картинок много и все разные.

Deff 25.07.2012 19:53

Acreator57887,
Заушно можно долго искать правды жизни (Напоминает лечение зубов по фотографии
Создайте тест с боль-мень рабочим скриптом - выложите ссылку

Acreator57887 25.07.2012 20:46

var $img = $('.demophoto');

$img.load(function (){
var CurImg = $(this);

CurImg.removeAttr("width");
CurImg.removeAttr("height");

var width = CurImg.width();
var height = CurImg.height();

if (width > height) {
CurImg.css('height', 180);
} else {
CurImg.css('width', 180);
};

var width_e = CurImg.width();
var height_e = CurImg.height();

if (width_e > 180) {
var rig = (width_e-180)/2;
CurImg.css('right', rig);
} else {
var bot = (height_e-180)/2;
CurImg.css('bottom', bot);
};

CurImg.css('display', block);
});


http://test-0-1.ucoz.ru/photo

Deff 25.07.2012 21:03

Acreator57887,
Если не секрет - что скрипт делает ?

Acreator57887 25.07.2012 23:43

демо-картинки. уменьшает и выравнивает

Deff 26.07.2012 00:01

Acreator57887,
Там в скрипте имхо смысла нет http://s1.uploads.ru/i/8E4sm.png

Cкриншот с отключенным ява скрипт и вставкой такого сss кода:
<style type="text/css">
td.phtTdMain img.demophoto{
  width: 288px!important;
  height: 180px!important;
}
</style>

Acreator57887 26.07.2012 12:06

:blink: Почему такое качество? А ясно, это качество скриншота.
Ну да, в этом и проблема, что в Опере после обновления страницы скрипт не выполняется. Незнаю как у Вас, но у меня если почистить кэш при первой загрузке так:
http://s2.hostingkartinok.com/upload...f2a97d96e2.png

У меня изначально в CSS выставленны минимальные и максимальные значения высоты и ширины изображений, так что скрипт только немного "доуменьшает" и позиционирует.

P.S. На странице возможны какие-либо изменения, т.к. я сам тоже пытаюсь) пробую разные варианты.

Deff 26.07.2012 12:30

Acreator57887,
Цитата:

Сообщение от Acreator57887
только немного "доуменьшает" и позиционирует.

Смысла в скрипте - нет
1. Изо стоят в див блоке со скрытым скроллом и автоцентрированием по ширине
2. у Изо скриптом выставляется высота 180, что равнозначно
height: 180px!important

Думаю смело можно выкинуть данный скрипт и оставить только css

Acreator57887 26.07.2012 12:43

:lol: Кажется решил проблему :lol:

Может опять "не до конца":lol:

Но по-моему всё работает. Может протестите? У меня сейчас во всех браузерах всё работает, ... пока работает))

Вот общий скриншот в опере:
http://smotr.im/6bLg

Вот результат работы скрипта:
http://smotr.im/6bLy

Вертикально-ориентированная картинка уменьшена: ширина соответствует 180 px, + выравнивание по середине по вертикали.

Acreator57887 26.07.2012 12:48

Deff,

А вот с отключенным javsdcript:
http://smotr.im/6bM4
http://smotr.im/6bMt

По-моему большая разница.
Или вы до сих пор считаете, что скрипт ничего не меняет??

$('.demophoto').each(function() {
var cimg = $(this);
var img = new Image;
img.onload = function() {

// Получаем размеры:
var width = cimg.width(); 
var height = cimg.height();


// Если ширина больше высоты, то высоте присваеваем 180, иначе ширине присваеваем 180

if (width > height) {
cimg.css('height', 180);
} else {
cimg.css('width', 180);
};


// Получаем новые размеры (на всякий пожарный):

var width_new = cimg.width();
var height_new = cimg.height();


// И позиционируем

if (width_new > 180) {
var rig = (width_new-180)/2;
cimg.css('right', rig);
} else {
var bot = (height_new-180)/2;
cimg.css('bottom', bot);
};

}
img.src = this.src;
});


Цитата:

Сообщение от Deff
скриптом выставляется высота 180

С чего вы это взяли? Так происходит только когда ширина больше высоты то есть когда картинка ориентирована горизонтально, если же картинка ориентирована вертикально, то ширине присваевается 180.

Deff 26.07.2012 13:15

Acreator57887,
пропишите onload="Func(this)" в тег каждой картинки - траблов не будет

<script type="text/javascript">
function Func(a) {
 alert(a.src)
}
</script>

<center>

<img src="http://javascript.ru/forum/images/smilies/blink.gif" onload="Func(this)"/><br /><br />
<img src="http://st.ladycash.ru/data/links_block/12997_12862_1.gif" onload="Func(this)"/>

</center>

Acreator57887 26.07.2012 13:19

Спасибо конечно) а что такое траблы?
Объясните нубу)

Deff 26.07.2012 13:23

Acreator57887,
Cкрипта достаточно одного на все картинки и он должен стоять выше их всех

Трабл - тоже, что и баг(Картинки просто загружаются ранее, чем Вы пытаетесь что то делать скриптом

Acreator57887 26.07.2012 13:27

Да, я примерно так и подумал, но не знал что конкретно эти траблы.

С этим я ступил, просто подключать к каждой к картинке, как ни странно это ни звучит, на ucoz намного легче - достаточно прописать скрипт в одном из шаблонов.

А выше вставлять, это куда? Без разницы или в head?

Deff 26.07.2012 13:29

Цитата:

Сообщение от Acreator57887
А выше вставлять, это куда? Без разницы или в head?

Главное, чобы скрипт был Выше всех картинок, куда не так Важно - обычно хороший тон рекомендует в hеad,

Acreator57887 26.07.2012 14:19

1) В head не получится - так как это юкоз:-E
2) А смысл вставлять выше? Там же вроде бы
img.onload = function() {


Поставил я выше на главной странице фотоальбомов (http://test-0-1.ucoz.ru/photo) - вообще скрипт не работает. А с чего он заработает? Браузер же ещё не прочитал картинки + img.onload. Или я ошибаюсь?

Вставлял ниже - работает. Но "траблы" никуда не ушли. Но не критично же...

Deff 26.07.2012 14:44

Acreator57887,
Блин - вы уберите это - img.onload = function() {

И вставьте вызов в сам тег картинки
а функцию - чисто функцией - ну смотрите же образец пост 17 !!!

devote 26.07.2012 14:57

Цитата:

Сообщение от Deff
И вставьте вызов в сам тег картинки

практика грязного кода.

Deff 26.07.2012 15:05

devote,
Иногда, взявшись, чуешь что достало,

Тут чувак и так дёргается, не уверен в своих силах, - а ти его уверенность убивашь до первого положительного успеха, мон и позже чуть сказать-показать - будет инварьянтность и опыт

Acreator57887 26.07.2012 18:45

Главное что теперь во всех браузерах работает:)

Про вызов - понятно теперь. Но это в следующий раз:)
Мне бы вот ещё с ползунком разобраться;)

Кстати на счёт бага...
Изначально в CSS поставил display:none; а на бэкграунд поставил gif лоадер, потом скриптом показал картинки .show();
Грузится долго, но картинки сразу изменённые появляются + гифка скрашивает серые минуты ожидания)


Часовой пояс GMT +3, время: 07:58.