Загрузить изображение из javascript

Ответ 1

вы можете просто добавить еще один скрытый элемент img и поменять их в onload.

Или используйте один элемент изображения и используйте javascript, например:

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://whatever';

этот код должен предварительно загрузить изображение и показать его, когда он готов

Ответ 2

Извините ребята.

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

function loadImg(options, callback) {
  var seconds = 0,
  maxSeconds = 10,
  complete = false,
  done = false;

  if (options.maxSeconds) {
    maxSeconds = options.maxSeconds;
  }

  function tryImage() {
    if (done) { return; }
    if (seconds >= maxSeconds) {
      callback({ err: 'timeout' });
      done = true;
      return;
    }
    if (complete && img.complete) {
      if (img.width && img.height) {
        callback({ img: img });
        done = true;
        return;
      }
      callback({ err: '404' });
      done = true;
      return;
    } else if (img.complete) {
      complete = true;
    }
    seconds++;
    callback.tryImage = setTimeout(tryImage, 1000);
  }
  var img = new Image();
  img.onload = tryImage();
  img.src = options.src;
  tryImage();
}

использовать так:

loadImage({ src : 'http://somewebsite.com/image.png', maxSeconds : 10 }, function(status) {
  if(status.err) {
    // handle error
    return;
  }
  // you got the img within status.img
}); 

Попробуйте это на JSFiddle.net

http://jsfiddle.net/2Cgyg/6/

Ответ 3

<span>
    <img id="my_image" src="#" />
</span>

<span class="spanloader">

    <span>set Loading Image Image</span>


</span>

<input type="button" id="btnnext" value="Next" />


<script type="text/javascript">

    $('#btnnext').click(function () {
        $(".spanloader").hide();
        $("#my_image").attr("src", "1.jpg");
    });

</script>

Ответ 4

Используйте новый объект изображения каждый раз, когда вы хотите загрузить изображение:

var image = new Image();
image.onload = function () {
    document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';

Ответ 5

Если вы загружаете изображение через AJAX, вы можете использовать обратный вызов, чтобы проверить, загружено ли изображение, и назначить атрибут hiding и src. Что-то вроде этого:

$.ajax({ 
  url: [image source],
  success: function() {
  // Do the hiding here and the attribute setting
  }
});

Для получения дополнительной информации обратитесь к JQuery AJAX

Ответ 6

Попробуйте это. У вас есть символы в $imageUrl

<img id="id1" src="$imageUrl" onload="javascript:showImage();">

Ответ 7

Вы можете попробовать следующее:

<img id="id1" src="url/to/file.png" onload="showImage()">

function showImage() {
 $('#id1').attr('src', 'new/file/link.png');
}

Кроме того, попробуйте удалить ~, который является просто оператором, который необходим для Server-Side (например, ASP.NET), вам не нужен он в JS.

Таким образом, вы можете изменить атрибут изображения.

Вот скрипка: http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/

Ответ 8

См. этот учебник: Загрузка изображений с помощью встроенного JavaScript и обработка событий для показа загружаемых роликов

В нем рассказывается, как загружать изображения с помощью встроенного JavaScript и как обрабатывать события для показа загружающих роликов. В принципе, вы создаете новый Image(); и правильно обработать событие. Это должно работать во всех браузерах даже в IE7 (возможно, даже ниже IE7, но я не тестировал это...)

Ответ 9

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

i создал элемент ввода [file] и сделал его скрытым,

<input type="file" id="upl" style="display:none"/>

это событие щелчка по входному файлу будет запущено функцией getImage.

<a href="javascript:;" onclick="getImage()"/>
    <img src="/assets/pen.png"/>
</a>

<script>
     function getImage(){
       $('#upl').click();
     }
</script>

это выполняется во время прослушивания события изменения элемента входного файла с идентификатором #upl.

   $(document).ready(function(){
     
       $('#upl').bind('change', function(evt){
         
		  var preview = $('#logodiv').find('img');
		  var file    = evt.target.files[0];
		  var reader  = new FileReader();
		
		  reader.onloadend = function () {
			$('#logodiv > img')
				.prop('src',reader.result)  //set the scr prop.
				.prop('width', 216);  //set the width of the image
				.prop('height',200);  //set the height of the image
		  }
		
		  if (file) {
			reader.readAsDataURL(file);
		  } else {
			preview.src = "";
		  }
		
	   });

   })

Ответ 10

мне очень жаль, что у меня нет ответа для вас, но я надеюсь, что вы найдете лучший ответ из этого поста :)