2

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

4
  • Вы уверены, что за ней данных нет? Вы используете асинхронные методы, может быть, вы проверяете значение D до того, как в него запишутся данные изображения?
    – br3t
    Commented 8 янв. 2017 в 8:43
  • значение выводится после цикла по всем элементам если выводить данные в этом месте то выведется только последний поскольку на прошлые были ссылки и они перезаписывались
    – Gotha
    Commented 8 янв. 2017 в 8:50
  • У вас получается что-то вроде img.src='url("http://www.radionetplus.ru/uploads/posts/2013-04/1365401196_teplye-oboi-1.jpeg")'. Некорректен пример или реализация?
    – br3t
    Commented 8 янв. 2017 в 8:59
  • а ты видел, что у тебя ошибка: Uncaught ReferenceError: url is not defined?
    – Grundy
    Commented 8 янв. 2017 в 9:10

1 ответ 1

2

При установке правильного 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>

1
  • блин извините рили так глуппо вышло ......жесть Спасибо
    – Gotha
    Commented 9 янв. 2017 в 8:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.