Afbeelding laden vanuit javascript

Op mijn albumpagina met diavoorstellingen heb ik een code zoals

<span style="display:none;">
   <img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>
<span>
    // show loader.
</span>

in showImage() weet ik zeker dat de afbeelding is geladen, dus ik toon de afbeelding en verberg de lader.

Als de gebruiker nu op volgende klikt, moet ik de src van de afbeelding wijzigen. Nu hoef ik niet te weten hoe ik src alleen moet instellen als de afbeelding is geladen.


Antwoord 1, autoriteit 100%

je kunt gewoon een ander verborgen img-element toevoegen en deze omwisselen in de gebeurtenis onload.

Of gebruik een enkel afbeeldingselement en gebruik javascript zoals:

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

deze code moet de afbeelding vooraf laden en tonen wanneer deze klaar is


Antwoord 2, autoriteit 14%

Sorry jongens.

Je kunt er niet op vertrouwen dat de gebeurtenis voor het laden van afbeeldingen wordt geactiveerd, maar je kunt er in sommige situaties wel op vertrouwen en terugvallen op een maximaal toegestane laadtijd. In dit geval 10 seconden. Ik heb dit geschreven en het leeft op productiecode voor wanneer mensen afbeeldingen willen koppelen aan een formulierbericht.

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();
}

gebruik zo:

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

Probeer het op JSFiddle.net

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


Antwoord 3, autoriteit 7%

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

Antwoord 4, autoriteit 5%

Als je de afbeelding via AJAX laadt, kun je een callback gebruiken om te controleren of de afbeelding is geladen en het verbergen en src-attribuut toewijzen.
Zoiets als dit:

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

Raadpleeg voor meer informatie deze JQuery AJAX


Antwoord 5, autoriteit 5%

Gebruik elke keer dat u een afbeelding wilt laden een nieuw afbeeldingsobject:

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

Antwoord 6

Probeer dit. Je hebt enkele symbolen in $imageUrl

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

Antwoord 7

Je kunt dit proberen:

<img id="id1" src="url/to/file.png" onload="showImage()">
function showImage() {
 $('#id1').attr('src', 'new/file/link.png');
}

Probeer ook de ~ te verwijderen, dat is alleen de operator, die nodig is voor Server-Side (bijvoorbeeld ASP.NET) die je niet nodig hebt in JS.

Op deze manier kunt u het kenmerk voor de afbeelding wijzigen.

Hier is de viool: http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/


Antwoord 8

Bekijk deze tutorial: Beelden laden met native JavaScript en het afhandelen van gebeurtenissen voor het tonen van het laden van spinners

Het vertelt je hoe je afbeeldingen laadt met native JavaScript en hoe je gebeurtenissen afhandelt voor het tonen van laadspinners. In principe maakt u een nieuwe Image(); en handel dan de gebeurtenis correct af. Dat zou in alle browsers moeten werken, zelfs in IE7 (misschien zelfs onder IE7, maar dat heb ik niet getest…)


Antwoord 9

dit werkte echter voor mij… ik wilde de afbeelding weergeven nadat er op het potloodpictogram werd geklikt… en ik wilde het naadloos.. en dit was mijn aanpak..

potloodknop om afbeelding weer te geven

ik heb een input[file]-element gemaakt en verborgen gemaakt,

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

De klikgebeurtenis van dit invoerbestand wordt geactiveerd door de functie getImage.

<a href="javascript:;" onclick="getImage()"/>
    <img src="/assets/pen.png"/>
</a>
<script>
     function getImage(){
       $('#upl').click();
     }
</script>

dit wordt gedaan terwijl u luistert naar de wijzigingsgebeurtenis van het invoerbestandselement met ID van #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 = "";
		  }
	   });
   })

Antwoord 10

Eenvoudigste afbeelding laden van JS naar DOM-element:

element.innerHTML += "<img src='image.jpg'></img>";

Met onload-gebeurtenis:

element.innerHTML += "<img src='image.jpg' onload='javascript:showImage();'></img>";

Antwoord 11

klik gewoon op de afbeelding en het verandert:

<div>
	<img src="https://i.imgur.com/jgyJ7Oj.png" id="imgLoad">
</div>
<script type='text/javascript'>
	var img = document.getElementById('imgLoad');	
	img.onclick = function() { img.src = "https://i.imgur.com/PqpOLwp.png"; }
 </script>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes