Невыполнение скрипта для уже загруженных картинок в опере
У меня есть скрипт, который уменьшает изображения и позиционирует их для получения "первью" или демо-картинок.
Выполняется он так:
var $img = $('.demophoto');
$img.load(function (){
// Сам скрипт
});
Проблема в том, что в опере скрипт выполняется только при первой загрузке изображений, после обновления страницы изображения, как я понял, уже загружены в кэш и, опять же как я понял, события Load просто напросто не происходит, соответственно скрипт не выполняется. Я где-то читал, что эту проблему можно решить trigger-ом, но как? я не понял даже после прочтения инструкции по триггеру. Помогите разобраться)) Весь скрипт |
$('.demophoto').each(function() {
var load = function() {
// Сам скрипт
}
if ( this.complete ) {
load.call( this );
} else {
$( this ).load( load );
}
});
|
Только хуже стало. В опере осталось по прежнему, а в других браузерах стало глюкать - иногда скрипт не выполняется.
Например в хроме скрипт выполняется после обновления страницы. |
$('.demophoto').each(function() {
var img = new Image();
img.onload = function() {
// Сам скрипт
}
img.src = this.src;
});
|
devote,
Возможно, оба ваши способа работоспособны, может виноват сам скрипт, я его не сам писал - он с урока, поглядел - там что-то намудрёно, сейчас упростил он заработал и в опере, только немного не так, как нужно. Если всё заработает - отпишусь. |
Да, проблема была именно в скрипте, что уменьшал изображения. Я его упростил, исправил + ваша конструкция - всё работает.
Спасибо)) P.S. Ссылка на весь скрипт осталась прежней - она есть в моём первом сообщении. |
Не совсем проблема решилась... :(
Ваша конструкция работает, но не работает внутри неё var imgs = $(this); А нужно именно this, так как картинок много и все разные. |
Acreator57887,
Заушно можно долго искать правды жизни (Напоминает лечение зубов по фотографии Создайте тест с боль-мень рабочим скриптом - выложите ссылку |
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 |
Acreator57887,
Если не секрет - что скрипт делает ? |
демо-картинки. уменьшает и выравнивает
|
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>
|
:blink: Почему такое качество? А ясно, это качество скриншота.
Ну да, в этом и проблема, что в Опере после обновления страницы скрипт не выполняется. Незнаю как у Вас, но у меня если почистить кэш при первой загрузке так: http://s2.hostingkartinok.com/upload...f2a97d96e2.png У меня изначально в CSS выставленны минимальные и максимальные значения высоты и ширины изображений, так что скрипт только немного "доуменьшает" и позиционирует. P.S. На странице возможны какие-либо изменения, т.к. я сам тоже пытаюсь) пробую разные варианты. |
Acreator57887,
Цитата:
1. Изо стоят в див блоке со скрытым скроллом и автоцентрированием по ширине 2. у Изо скриптом выставляется высота 180, что равнозначно height: 180px!important Думаю смело можно выкинуть данный скрипт и оставить только css |
:lol: Кажется решил проблему :lol:
Может опять "не до конца":lol: Но по-моему всё работает. Может протестите? У меня сейчас во всех браузерах всё работает, ... пока работает)) Вот общий скриншот в опере: http://smotr.im/6bLg Вот результат работы скрипта: http://smotr.im/6bLy Вертикально-ориентированная картинка уменьшена: ширина соответствует 180 px, + выравнивание по середине по вертикали. |
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;
});
Цитата:
|
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,
Cкрипта достаточно одного на все картинки и он должен стоять выше их всех Трабл - тоже, что и баг(Картинки просто загружаются ранее, чем Вы пытаетесь что то делать скриптом |
Да, я примерно так и подумал, но не знал что конкретно эти траблы.
С этим я ступил, просто подключать к каждой к картинке, как ни странно это ни звучит, на ucoz намного легче - достаточно прописать скрипт в одном из шаблонов. А выше вставлять, это куда? Без разницы или в head? |
Цитата:
|
1) В head не получится - так как это юкоз:-E
2) А смысл вставлять выше? Там же вроде бы
img.onload = function() {
Поставил я выше на главной странице фотоальбомов (http://test-0-1.ucoz.ru/photo) - вообще скрипт не работает. А с чего он заработает? Браузер же ещё не прочитал картинки + img.onload. Или я ошибаюсь? Вставлял ниже - работает. Но "траблы" никуда не ушли. Но не критично же... |
Acreator57887,
Блин - вы уберите это - img.onload = function() { И вставьте вызов в сам тег картинки а функцию - чисто функцией - ну смотрите же образец пост 17 !!! |
Цитата:
|
devote,
Иногда, взявшись, чуешь что достало, Тут чувак и так дёргается, не уверен в своих силах, - а ти его уверенность убивашь до первого положительного успеха, мон и позже чуть сказать-показать - будет инварьянтность и опыт |
Главное что теперь во всех браузерах работает:)
Про вызов - понятно теперь. Но это в следующий раз:) Мне бы вот ещё с ползунком разобраться;) Кстати на счёт бага... Изначально в CSS поставил display:none; а на бэкграунд поставил gif лоадер, потом скриптом показал картинки .show(); Грузится долго, но картинки сразу изменённые появляются + гифка скрашивает серые минуты ожидания) |
| Часовой пояс GMT +3, время: 23:29. |