Develop Reference

Image source not changing with JavaScript

Please answer this question, as I am struggling a lot with it.
I am trying to change image source on mouse over. I am able to do it, but image is not displaying on page.
I am trying to change image source to cross domain URL. I can see that in DOM image source is changing but on page its not.
I have tried all solutions mentioned in LINK, but none of them is working.
Please let me solution to problem.
NOTE:
I can see in network tab image is taking some time to download (about 1 sec).
It is an intermediate issue, sometime image is loading and sometimes its not
CODE:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function()
{
document.getElementsByTagName('img')[0].setAttribute('src', 'url/of/the/image');
});

have you tried loading images before everything else?
function initImages(){
var imC = 0;
var imN = 0;
for ( var i in Images ) imN++;
for(var i in Images){
var t=Images[i];
Images[i]=new Image();
Images[i].src=t;
Images[i].onload = function (){
imC++;
if(imC == imN){
console.log("Load Completed");
preloaded = 1;
}
}
}
}
and
var Images = {
one image: "path/to/1.png",
....
}
then
if( preloaded == 1 ){
start_your_page();
}

Here the code that will remove the img tag and replace it with a new one:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function() {
var parent = document.getElementsByTagName('img')[0].parentElement;
parent.removeChild(document.getElementsByTagName('img')[0]);
var new_img = document.createElement("img");
new_img.src = "https://upload.wikimedia.org/wikipedia/commons/6/69/600x400_kastra.jpg";
parent.appendChild(new_img);
});
<img src="https://www.w3schools.com/w3images/fjords.jpg">

I resolved the issue using code:
function displayImage() {
let image = new image();
image.src="source/of/image/returned/from/service";
image.addEventListener('load', function () {
document.getElementsByTagName('img')[0].src = image.src;
},false);
}
Here in code, I am attaching load event to image, source of image will be changed after image is loaded.

'Sounds' folder not loading correctly to localhost

Good afternoon,
I've been following this tutorial to make a simple (!) html5 canvas game. I've been using the error console on Safari to help troubleshoot, but I can't figure this one out; I have an 'img' folder, containing all artwork, and a 'sounds' folder, containing all sounds.
All assets are loaded with the assetLoader and checked before the page loads - if something is missing or labelled incorrectly, it won't load.
The sounds 'do' play - the theme music runs fine, and sound effects trigger approx 60% - 70% of the time (jump sound, collide sound etc) but the folder hasn't loaded correctly. If I check the 'resources' tab, 'sounds' is now called 'Other', and if I click on any of the mp3's in that folder, I get the message 'An error occurred trying to load the resource'.
The assetLoader part of the code looks like this:
var assetLoader = (function() {
this.sounds = {
'bg' : 'sounds/theme.mp3',
'jump' : 'sounds/fart.mp3',
'gameOver' : 'sounds/gameOver.mp3',
'ding' : 'sounds/ding.mp3'
};
Then I have a var to check the total number of sound assets:
var numSounds = Object.keys(this.sounds).length;
Then I have this function to check the state:
function _checkAudioState(sound) {
if (this.sounds[sound].status === 'loading' && this.sounds[sound].readyState === 4)
{ assetLoaded.call(this, 'sounds', sound);
}
}
Finally, I have a downloadAll function that looks like this:
this.downloadAll = function() {
var _this = this;
var src;
for (var img in this.imgs) {
if (this.imgs.hasOwnProperty(img)) {
src = this.imgs[img];
(function(_this, img) {
_this.imgs[img] = new Image();
_this.imgs[img].status = 'loading';
_this.imgs[img].name = img;
_this.imgs[img].onload = function() { assetLoaded.call(_this, 'imgs', img) };
_this.imgs[img].src = src;
})(_this, img);
}
}
for (var sound in this.sounds) {
if (this.sounds.hasOwnProperty(sound)) {
src = this.sounds[sound];
(function(_this, sound) {
_this.sounds[sound] = new Audio();
_this.sounds[sound].status = 'loading';
_this.sounds[sound].name = sound;
_this.sounds[sound].addEventListener('canplay', function() {
_checkAudioState.call(_this, sound);
});
_this.sounds[sound].src = src;
_this.sounds[sound].preload = 'auto';
_this.sounds[sound].load();
})(_this, sound);
}
}
}
return {
imgs: this.imgs,
sounds: this.sounds,
totalAssest: this.totalAssest,
downloadAll: this.downloadAll
};
})();
I've left the images in this block of code as they work fine, and I think the sounds should too, but for some reason they don't. I have read about potential mp3 compatibility problems with browsers and html5 canvas, but as the sounds are playing I'm not sure this is the issue. If anyone can offer any insight, that would be much appreciated.

Pre-load image before using it

I'm using an image that needs to change when you click on it and to do that I'm using a JavaScript onclick. There a brief "flick" the first time I do it while it load the image but this only happens the first time. Is there a way to preload the second image so the change it as smooth the first time as it is all the others?

Preloading images is a great way to improve the user experience. You have 3 Ways to Preload Images with CSS, JavaScript, or Ajax:
Method 1: Preloading with CSS and JavaScript
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
By strategically applying preload IDs to existing (X)HTML elements, we can use CSS’ background property to preload select images off-screen in the background. Then, as long as the paths to these images remains the same when they are referred to elsewhere in the web page, the browser will use the preloaded/cached images when rendering the page. Simple, effective, and no JavaScript required.
Method 2: Javascript Only
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
Source: Perishable Press

Something like :
image = new Image();
image.src = "image.jpg";
image.onLoad = function(){
alert("image ready");
}
Or with more images :
function all_images_preloaded(){
alert("all images are ready to use");
}
var imgs = [
"image1.jpg"
, "image2.jpg"
, "image3.jpg"
];
var count = imgs.length;
var count_loaded = 0;
for(i in imgs){
image = new Image();
image.src = "image.jpg";
image.onLoad = function(){
count_loaded++;
if(count_loaded == count){
all_images_preloaded();
}
}
}

How can i play a gif like 9 gag?

http://www.9gag.com
I want pause and play a gif,like the 9gag,
how can i do that?
I know I have to use one. Jpg and. Gif but I tried a few things but did not work
I found this function
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
function unfreeze_gif(id, src) {
i = document.getElementById(id);
i.src = src;
}
but i dont know how to use on the HTML
Can someone give me an example? with HTML , CSS E JS (or Jquery) ?
Thanks

It's just 2 versions of the image: One static JPG, one moving GIF.
Here's a fiddle that mimic the behaviour: http://jsfiddle.net/bortao/QADeM/
JS
$(".gif-post").on("click", function () {
var $this = $(this);
var img = $this.find("img"); // Find the image element
if (!this.playing) {
this.playing = true; // Set or create a variable
img.attr("src", img.attr("src").replace(".jpg", "a.gif"));
$this.find(".play").hide(); // Hide the overlay
} else {
this.playing = false;
img.attr("src", img.attr("src").replace("a.gif", ".jpg"));
$this.find(".play").show();
}
});

I was actually working on a 9gag clone myself, so i was searching as well for a gif player.
You can use this one: http://freezeframe.chrisantonellis.com/
All you have to do for this one is include the javascript and in the .gif link and add the following class: "freezeframe"
There is also this one: http://quickleft.com/blog/embeddable-animated-gifs-with-controls-just-in-time-for-christmas
I haven't used it, but it seems very interesting.

Javascript image onload not firing when loading from local file

I'm trying to give the user a preview of how an image will look when combined with another image before they upload the image (think gun shooting a bullet). I can get the image to load into an image element, but then the onload event doesn't fire (tested in chrome and firefox). I've tried using setTimeout as a dirty hack, but unfortunately bullet.image.height does not appear to be set within a relatively short space of time.
Here is an example of what I'm trying to do:
if (input.target.files && input.target.files[0]) {
var file = new FileReader();
file.onload = function (event) {
// this part works fine
var bullet = {};
bullet.id = 0;
bullet.image = new Image();
bullet.image.onload = function () {
// This never fires
bullet.offset_y = bullet.image.height / 2;
$('#modal-weapons-field-bullet').append('<option value="0">' + bullet.title + '</option>');
$('#modal-weapons-field-bullet').val(0);
};
bullet.src = event.target.result;
bullet.offset_x = 0;
bullet.title = input.target.files[0].name;
}
file.readAsDataURL(input.target.files[0]);
}

bullet.src should be bullet.image.src