Hello. Already I suffer the second day in search of an answer to the behavior of js. In attempts to write data inside onload , the current image data is there, but I don’t understand why, I tried to create objects there, copy and convert data - I couldn’t work anything, I didn’t understand everything everywhere. Maybe one of you knows the answer. Thanks in advance 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; })

full code:

 (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>

  • Are you sure that there is no data behind it ? You use asynchronous methods, maybe you are checking the value of D before the image data is written to it? - br3t
  • the value is displayed after a cycle on all elements. If you display data in this place, then only the last one will be displayed since there were references to the past and they were overwritten - Gotha
  • You get something like img.src='url("http://www.radionetplus.ru/uploads/posts/2013-04/1365401196_teplye-oboi-1.jpeg")' . Incorrect example or implementation? - br3t
  • did you see that you had an error: Uncaught ReferenceError: url is not defined ? - Grundy

1 answer 1

When installing the correct src on the image, timely displaying information on the screen and removing $(window).on("resize load") should work correctly:

 var img = new Image(); img.onload = function() { D['IW'] = img.width; D['IH'] = img.height; D['url'] = img.src; this_o.find(".info").html(D + ''); }; img.src = this_o.css('background-image').replace(/url\("?|"?\)$/ig, "");

Jsfiddle

 (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>' } }; //в глобальном объекте создаю под каждый элемент обьект с его данными var D = data['el ' + indexEL]; //просто для краткости объект элемента который сейчас идет по циклу var img = new Image(); img.onload = function() { D['IW'] = img.width; D['IH'] = img.height; D['url'] = img.src; this_o.find(".info").html(D + ''); }; img.src = this_o.css('background-image').replace(/url\("?|"?\)$/ig, ""); }; 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>

  • damn sorry sorry so foolish happened ...... tin Thank you - Gotha