Develop Reference

HTMLImageElement onclick

I am trying to add an onclick event that calls a function selectMain(name). When I run my project it doesn't seem to generate the onclick attribute from the image.
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
if (/\.(jpe?g|png)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
image.onclick = selectMain(file.name);
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
function selectMain(name) {
var files = document.querySelector('input[type=file]').files;
Array.from(files).forEach(file => {
if (file.name == name) {
document.getElementById("primaryPhoto").value = file;
}
});
}

Try thisimage.onclick = function(){ selectMain(file.name); };

In addition to what Gagik answered (the early selectMain call is definitiely an issue even if it doesn't fix the whole thing), what is
document.getElementById("primaryPhoto").value = file;
supposed to do? If primaryPhoto is a input[type=file] element, then that won't work due to security limitations
You cannot set the value of a file picker from a script
Source.

(/\.(jpeg?g|png)$/i.test(file.name))

In the existing code, function get invoked on the time of render on dom.
here is the correct way to bind event.
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
image.onclick =()=>{selectMain(file.name)};

get uploaded image height and width on callback -javascript

I need to load multiple image asynchronously from file field and them check if the dimensions are valid or not. I am pretty close, I just need to get the height of previously loaded image on call back. This is my effort so far:
let files = this.fileUpload.files; //get all uploaded files
for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
console.log(f);
let img = new Image();
img.name=f.name;
img.size=f.size;
img.onload = () =>{alert(img.height)} //it is giving height here
if (img.complete) { //callback
alert(img.name + 'loaded');
load_count++;
library_store.uploaded_image.push(
{
height:img.height,
width:img.width, // not coming, just wondering how to get
//the image height from load
name:img.name,
size:img.size
}
);
}
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
What is the best way to do this?

Wouldn't you want to move library_store logic to img.onload? Like below:
let files = this.fileUpload.files; //get all uploaded files
for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
console.log(f);
let img = new Image();
img.name=f.name;
img.size=f.size;
img.onload = function() {
// hoping that ```this``` here refers to ```img```
alert(this.name + 'loaded');
load_count++;
library_store.uploaded_image.push({
height:this.height,
width:this.width,
name:this.name,
size:this.size
});
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
}
// img.onload = () =>{alert(img.height)} //it is giving height here
/*
if (img.complete) { //callback
alert(img.name + 'loaded');
load_count++;
library_store.uploaded_image.push({
height:img.height,
width:img.width,
name:img.name,
size:img.size
});
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
}
*/
}

First let's see why you will always fall in this if(img.complete) block even though your images have not been loaded yet:
The complete property of the HTMLImageElement only tells if its resource is being loaded at the time you get the property.
It will report true if the loading succeed, failed, and if the src has not been set.
var img = new Image();
console.log('no-src', img.complete);
img.onerror = function() {
console.log('in-error', img.complete);
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="
};
img.onload = function() {
console.log('in-load', img.complete);
}
img.src = "/some/fake-path.png";
console.log('while loading', img.complete);
And, at the time you get it, you didn't set this src attribute yet, so it will report true even though your image has not yet loaded its resource.
So what you want is an image preloader:
function preloadImages(srcArray, mustAllSucceed) {
return Promise.all(srcArray.map(loadImage));
function loadImage(src) {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = success;
img.onerror = mustAllSucceed ? success : reject;
img.src = src;
function success() {
resolve(img)
};
});
}
}
preloadImages(['https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg', 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Gran_Mezquita_de_Isfah%C3%A1n%2C_Isfah%C3%A1n%2C_Ir%C3%A1n%2C_2016-09-20%2C_DD_34-36_HDR.jpg'])
.then(images => {
images.forEach(img => console.log(img.src, img.width, img.height));
}, true);

Src for the images does not set properly

I have some divs that has a class named class='tweetCon'
each containing 1 image and I want to check if the image source exist or not so if it is available I dont do anything but if not I will change the image source with an appropriate image my code is as follow:
$('.tweetimgcon').children('img').each(function () {
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
$(this).attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});
and also imageExists() is as follow:
function imageExists(url, callback,callback2) {
var img = new Image();
img.onload = function() { callback(true);callback2(); };
img.onerror = function() { callback(false);callback2(); };
img.src = url;
}
now the problem is that the src for the images that are not available does not set properly though when I check the src of those images by console.log it shows that they are properly set but it is not shown and when I use inspect element of chrome I can see that src is not set . Can anyone help me?

The point is $(this) doesn't point to your object, because you call $(this) inside your imgExists callback function but NOT the jQuery callback function each, so the this object doesn't point to your original img tag!
The solution should be save the object reference first, try the below:
$('.tweetimgcon').children('img').each(function () {
var _this = $(this);
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
_this.attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});

Just for a little tip for a better callback function use call.
function imageExists(url, cb, ecb) {
var img = new Image();
img.onload = function() { cb.call(img,true,url); };
img.onerror = function() { ecb.call(img,false,url); };
img.src = url;
}
I added img as the first argument and that will then be your this keyword instead of window.
Testing Bin

mobile safari - reliable callback for when Image loads?

I try to load an image as such:
var img = new Image();
img.src = 'mars.png';
img.onLoad = callback;
function callback(){
// doesnt fire
alert("loaded");
}
the callback never fires, whats the workaround?

You MUST define the onload BEFORE you change the src and event handlers are lowercase so it is spelled onload
var img = new Image();
img.onload = callback;
img.src = 'mars.png';
function callback(){
alert("loaded");
}
or as I prefer it
var img = new Image();
img.onload = function(){
alert("loaded");
}
img.src = 'mars.png';

Have you tried these?
var img = new Image();
img.src = 'mars.png';
img.onLoad = function(){
// doesnt fire
alert("loaded");
};

mplungjan is right you can use these instead:
img.onload = function(){
// doesnt fire
alert("loaded");
};
with lower l in onLoad

Looking for an alternative to the image onLoad [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery or JavaScript: Determine when image finished loading
The problem is known, but I can't find any simple solution:
var img = new Image();
img.onLoad = function() {
console.log("load"); // this event doesn't fire
};
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
I was looking for an implementation of onComplete event, but I can't find anything. Would you help?

The proper spelling of the event handler property is all lowercase .onload, not .onLoad.
var img = new Image();
img.onload = function() {
console.log("load"); // works every time
};
img.src = "img/domino/21.png";
Javascript is case sensitive so you MUST use the proper case for all object properties.
The alternatives besides .onload are to use:
img.addEventListener("load", function(e) {...});
or (in older versions of IE):
img.attachEvent("onload", function(e) {...});
If you're only using one event handler and you aren't using a cross platform library that already abstracts event handlers for you, then using .onload is the simplest.
And, here's a simple cross browser way to add event handlers:
// add event cross browser
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}

var img = new Image();
img.onload = function() {
console.log("load");
};
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
In Chrome,Firefox and Safari
var img = new Image();
img.addEventListener('load',function() {
console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
Or in IE or Opera
var img = new Image();
img.attachEvent('onload',function() {
console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);

Are you sure your image at img/domino/21.png exists? The following code works for me in Firebug's console.
var img = new Image();
var onload = function() {
console.log('load');
}
img.onload = onload;
img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds();

If you can use jQuery it can be simple:
$('img').load(foo).error(foo);
Or with vanilla javascript:
img.onload = img.onerror = foo;

var img = new Image();
//blah blah...
img.addEventListener("load",function() {
console.log("Loaded!");
});