При изменении источника изображения его ширина / высота обнуляются при первом нажатии - PullRequest
Новая
       10

При изменении источника изображения его ширина / высота обнуляются при первом нажатии

4 голосов
/ 11 ноября 2011

Когда я выбираю изображение из множества вариантов уже на сервере, а затем нажимаю на холст, изображение будет нарисовано в месте щелчка.

Проблема, с которой я столкнулся, заключается в том, что при первом щелчке высота и ширина изображения равны нулю и ничего не рисуется. При втором щелчке он работает отлично и продолжает работать до тех пор, пока я не выберу другое изображение, а затем первый щелчок не будет работать снова.

Я предполагаю, что, поскольку при выборе нового источника изображения это происходит только из-за того, что изображение еще не загружено, когда заданы ширина и высота.

Вот код:

где source пример строки: "sample / ball.png", "sample / dog.png"

Javascript : 

  this.image_object = new Image();
  this.image_object.src = source;
  this.width = this.image_object.width;
  this.height = this.image_object.height;

CoffeeScript 

@image_object = new Image()
@image_object.src = source
@width = @image_object.width
@height = @image_object.height

Любые предложения приветствуются. Этот код вызывается только при нажатии отдельной кнопки, поэтому изображение не может быть вызвано при загрузке страницы.

EDIT:

Также хочу отметить, что ручная установка ширины / высоты изображения «new Image (52,52)» по-прежнему занимает два щелчка, так как изображение не загружается.

Ответы [ 3 ]

3 голосов
/ 11 ноября 2011

Да, это потому, что изображение не было загружено в DOM, когда вызывается атрибут .width.Все, что вы сделали, это установили источник.Вот почему он работает после нажатия кнопки.Вы должны загрузить изображение в DOM, прежде чем можно будет определить ширину.

Используете ли вы фреймворк?

Если нет, это, вероятно, поможет.http://www.webdeveloper.com/forum/showthread.php?t=108392

1 голос
/ 11 ноября 2011

Скорее всего, вы хотите загрузить все изображения сразу после загрузки страницы. Для этого я использую следующую функцию: 

  loadImages = (fxDone) ->
    doneCount = 0 
    total = imageURLs.length
    for imageURL in imageURLs
      imageName = imageURL.slice(0, imageURL.lastIndexOf("."))
      images[imageName] = new Image()
      images[imageName].onload = ->
        doneCount++
        if doneCount == total
          fxDone()
      images[imageName].src = imageURL

Где-то за пределами этой функции, imageURLs должен быть определен как список URL изображений. И images должен быть инициализирован как пустая карта. Я вызываю это в обработчике onload и передаю функцию fxDone, чтобы начать работу, которая зависит от загружаемых изображений.

Другой вариант - загрузить по клику, если изображение еще не загружено. Обратите внимание, что это будет немного медленнее реагировать на первый щелчок. Я бы сделал это следующим образом: 

if @images[source]?
  @width = @images[source].width
  @height = @images[source].height
else
  @images[source] = new Image()
  @images[source].onload = ->
    @width = @images[source].width
    @height = @images[source].height
  @images[source].src = source

За пределами этого @images следует инициализировать пустой картой.

0 голосов
/ 11 ноября 2011

Поскольку у вас есть тег jQuery, я бы использовал jQuery для этого. Действительно, проблема в том, что ширина и высота не известны, пока изображение не загружено. Сделайте это вместо: 

var container = this;
var theImg = $('<img/>')
    .appendTo($(container))
    .load(function() { 
        $(container).width(theImg.width()).height(theImg.height());
    })
    .attr('src', source);
...