<script type="text/javascript">
$(document).ready(function(){
$("#loader a").each(function(index,el){
var img = new Image();
$(img).load(function () {
$(this).hide();
$(el).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// error handling
}).attr('src', $(this).attr('rel'));
});
});
</script>
Стили:
DIV#loader {
border: 1px solid #ccc;
width:500px;
height: 400px;
}
DIV#loader.loading {
background: url(images/content/wait.gif) no-repeat center center;
}
и блоки:
<div id="loader" class="loading"><a rel="images/1.jpg"></a></div>
<div id="loader" class="loading"><a rel="images/2.jpg"></a></div>
Этот код загружает картинку (путь берет из a rel) и отображает а пока она грузится замещает "спиннером". Делает он это для каждого изображения, которое обозначено DIV с ID="loader".
Проблема в том, что сейчас строчка $(el).removeClass('loading').append(this);
не работает, когда изменяю на $("#loader").removeClass('loading').append(this);,
то работает - "спиннер" исчезает, но только у первого DIV с ID="loader". Как сделать, чтобы он исчезал у всех блоков DIV с ID="loader"?
Спустя 40 минут, 20 секунд (21.06.2010 - 10:14) userguest написал(а):
Как в строчке:
$(el).removeClass('loading').append(this);
вместо el сослаться на родителя, т.е. на #loader текущего тега а?
$(el).removeClass('loading').append(this);
вместо el сослаться на родителя, т.е. на #loader текущего тега а?
Спустя 12 минут, 51 секунда (21.06.2010 - 10:27) andyp написал(а):
el.parentNode или $(el).parent(). В первом случае получаем объект DOM, во втором объект jquery
Спустя 16 минут, 24 секунды (21.06.2010 - 10:43) userguest написал(а):
Спасибо вам большое.
Именно то, что нужно.
Второй день бьюсь, не получалось, а тут...
Спасибо.
Именно то, что нужно.
Второй день бьюсь, не получалось, а тут...
Спасибо.
Спустя 15 минут, 14 секунд (21.06.2010 - 10:59) userguest написал(а):
Сделал то, что хотел, но очень криво.
Вот код. После него опишу проблему.
Jquery:
HTML:
CSS:
Проблема такая.
Для каждого изображения на сайте, их может быть сотни, придется создавать свой стиль.
Как бы сделать так, чтобы и размеры изображения брались из html кода из какого-нибудь аттрибута?
Вот код. После него опишу проблему.
Jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#loader a,#loader1 a").each(function(index,el){
var img = new Image();
$(img).load(function () {
$(this).hide();
$(el).parent().removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// error handling
}).attr('src', $(this).attr('rel'));
});
});
</script>
HTML:
<div id="loader" class="loading"><a rel="images/1.jpg"></a></div>
<div id="loader1" class="loading"><a rel="images/2.jpg"></a></div>
CSS:
DIV#loader {
border: 1px solid #ccc;
width:569px;
height: 472px;
margin: 0 auto;
}
DIV#loader1 {
border: 1px solid #ccc;
width:361px;
height: 442px;
margin: 0 auto;
}
DIV#loader.loading, DIV#loader1.loading {
background: url(images/wait.gif) no-repeat center center;
}
Проблема такая.
Для каждого изображения на сайте, их может быть сотни, придется создавать свой стиль.
Как бы сделать так, чтобы и размеры изображения брались из html кода из какого-нибудь аттрибута?
Спустя 3 минуты, 26 секунд (21.06.2010 - 11:02) userguest написал(а):
Можно, конечно, изображения одного размера делать, но это не выход.
Спустя 35 минут, 9 секунд (21.06.2010 - 11:37) tomash написал(а):
| Цитата (userguest @ 21.06.2010 - 07:59) |
| Как бы сделать так, чтобы и размеры изображения брались из html кода из какого-нибудь аттрибута? |
var height = $("Элемент html").attr("height");
Спустя 21 минута, 24 секунды (21.06.2010 - 11:58) userguest написал(а):
Спасибо за ответ, но это тоже не вариант.
Проблема та же.
Для каждого изображения на сайте, их может быть сотни, придется создавать свой стиль. Как от этого избавиться?
Проблема та же.
Для каждого изображения на сайте, их может быть сотни, придется создавать свой стиль. Как от этого избавиться?
Спустя 35 минут, 48 секунд (21.06.2010 - 12:34) tomash написал(а):
userguest
А они одним стилем сделаны? Или каждое изображение имеет свои размеры?
А они одним стилем сделаны? Или каждое изображение имеет свои размеры?
Спустя 1 час, 2 минуты, 28 секунд (21.06.2010 - 13:37) userguest написал(а):
В том и проблема, что у каждого свои размеры.