Запись данных в объект

223

09 января 2017, 22:44

Здравствуйте. Уже мучаюсь второй день в поисках ответа на поведения 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>

Answer 1

При установке правильного src у картинки, своевременного отображения информации на экране и удалении $(window).on("resize load") должно работать правильно:

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>