Вход

Просмотр полной версии : условие для изображений

joker95
29.06.2016, 19:36
Здравствуйте! Помогите мне пожалуйста. На сайте N кол-во изображений "класс - .ob_img img" есть код
$('.ob_img').append('<div class="photo_numb"></div>');
Хочу чтобы этот код применялся только к тому изображению чей размер в ширину превышает 100px, это возможно? Я не разбираюсь в js помогите мне
Viral
29.06.2016, 19:53
А в чем Вы разбираетесь, позвольте спросить?)
joker95
29.06.2016, 19:58
Я только начинаю изучать js и jquery. Пока изучил только html и css
рони
29.06.2016, 20:56
joker95,
в изображение нельзя вставить div.
Rasy
29.06.2016, 20:58
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="ob_img">
<img src="http://spirit-ninja.ru/wp-content/uploads/2012/08/frog-milk.jpg" style="width: 200px" alt="">
</div>
<div class="ob_img">
<img src="http://spirit-ninja.ru/wp-content/uploads/2012/08/frog-milk.jpg" style="width: 100px" alt="">
</div>

<script>
$('.ob_img img').each(function(indx, elem) {
if ($(elem).width() > 100) {
$(this).parent().append('<div class="photo_numb">Rasy</div>');
}
});
</script>
</body>
рони
29.06.2016, 21:02
Rasy,
а если размер картинки только после загрузки?
рони
29.06.2016, 21:17
joker95,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.photo_numb:after{
content: "big"
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(window).on("load", function(){
$(".ob_img").filter(function() {
return $("img",this).width() > 100
}).append('<div class="photo_numb"></div>');
})
</script>
</head>

<body>
<div class="ob_img">
<img src="http://i.i.ua/photo/images/pic/6/4/1008546_75741f3e.jpg" alt="">
</div>
<div class="ob_img">
<img src="http://pda.maybe.ru/p/177/176879/t17638688.jpg" alt="">
</div>
</body>
</html>
Rasy
29.06.2016, 21:48
а если размер картинки только после загрузки?
забыл про нерушимый факт
Rasy
29.06.2016, 22:14
рони,
если не ждать полную загрузку страницы?

$(function() {
$(".ob_img img").load(function (){
$(this).filter(function() {
return $(this).width() > 100
}).after('<div class="photo_numb"></div>')
})
});
рони
29.06.2016, 22:24
если не ждать полную загрузку страницы?
неуверен я в этой конструкции, не знаю есть ли в jquery
img.complete && img.onload() или назначение на все картинки успевает до их загрузки или я что-то упустил.
Rasy
29.06.2016, 22:36
http://api.jquery.com/load-event/есть:)
рони
29.06.2016, 23:33
есть
но там же написано что не работает как раз
Can cease to fire for images that already live in the browser's cache

нету в ней img.complete && img.onload()

плагины для этого пишут
типа такого https://raw.githubusercontent.com/peol/jquery.imgloaded/master/ahpi.imgload.js
Rasy
30.06.2016, 00:02
рони, тогда в чем смысл данного кода7
<img src="book.png" alt="Book" id="book">

$( "#book" ).load(function() {
// Handler for .load() called.
});
рони
30.06.2016, 00:07
Rasy,
не знаю
рони
30.06.2016, 00:49
Rasy,
работает но ранее были проблемы из-за кеша, может внесли изменения ... но в документации куча предостережений наверно не просто так.
joker95
30.06.2016, 13:05
Спасибо всем большое, все работает)))
joker95
30.06.2016, 13:49
вот только первый вариант иногда не полностью срабатывает, а этот работать не хочет почему-то $(function() {
$(".ob_img img").load(function (){
$(this).filter(function() {
return $(this).width() > 100
}).after('<div class="photo_numb"></div>')
})
});