Здравствуйте. Уже мучаюсь второй день в поисках ответа на поведения js.
В попытках записать данные внутри onload
, данные текущей картинки есть, а за ней нету в чем причина не понимаю, пытался и объекты там создавать, данные копировать и преобразовывать - ничего, что умею не сработало, в везде все облазил не пойму. Может кто из вас знает ответ. Заранее спасибо
http://jsfiddle.net/r2bzoL9r/
$(window).on("resize load",function(){
var img = new Image();
img.onload = function(){
D['IW'] = img.width,
D['IH'] = img.height;
}
img.src = url;
})
полный код:
(function($) {
jQuery.fn.myF = function(options) {
var data = {}; //создаю глобальный объект со всеми данными
var make = function(indexEL) {
var this_o = $(this);
//в глобальном объекте создаю под каждый элемент обьект с его данными
data['el ' + indexEL] = {
IH: 00,
IW: 00,
toString: function() {
return 'IH : ' + this.IH + '<br>\
IW : ' + this.IW + '<br>\
url : ' + this.url + '<br>'
}
}
D = data['el ' + indexEL]
//просто для краткости объект элемента который сейчас идет по циклу
//записываю в объект элемента путь картинки
D['url'] = this_o.css('background-image')
//а вот записать высоту с шириной не выходит почему не знаю
$(window).on("resize load", function() {
var img = new Image();
img.onload = function() {
D['IW'] = img.width,
D['IH'] = img.height;
}
img.src = url;
})
//вывожу на элементе его данные
this_o.find(".info").html(D + '')
};
//цикл по найденым элементам
return this.each(make);
};
})(jQuery);
$('.img').myF({})
.img {
height: 200px;
width: 200px;
background: #543;
margin: 10px;
}
#gg1 {
background-image: url("http://www.porjati.ru/uploads/posts/2013-09/thumbs/1380204950_5.jpg");
}
#gg3 {
background-image: url("http://www.radionetplus.ru/uploads/posts/2013-04/1365401196_teplye-oboi-1.jpeg");
}
#gg2 {
background-image: url("http://picfun.ru/wp-content/uploads/HTxyUcwXfw.jpg");
}
.info {
color: #000;
background: #f4f;
opacity: .8;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img' id='gg1'>
<div class='info'>
</div>
</div>
<div class='img' id='gg2'>
<div class='info'>
</div>
</div>
<div class='img' id='gg3'>
<div class='info'>
</div>
</div>
D
до того, как в него запишутся данные изображения?img.src='url("http://www.radionetplus.ru/uploads/posts/2013-04/1365401196_teplye-oboi-1.jpeg")'
. Некорректен пример или реализация?