We Keep Coding

Make chain img.onload with img.src to Image() object

I have a function able to read array of "links of images" with foreach(item) iteration. In each iteration I am trying to: load image in an Image() object, and in the onload event to get properties (naturalWidth & naturalHeight) and paste it in the DOM as background of <DIV>.
However img.onload is asynchronous and before onload event pastes ones all iterations will pass.
How can I make continuous chain of img.onload and changing of img.src in each iteration?
function singleGrid() {
galdiv1.className = galClassList;
function imgFill() {
arr.forEach(function(item) {
img = new Image();
img.onload = function() {
var nHeight = this.naturalHeight;
var nWidth = this.naturalWidth;
var res = nWidth / nHeight;
console.log("image source: " + arr[i] + ", naturalWidth: " + nWidth + "px, naturalHeight: " + nHeight + "px");
blockres = width * res;
var div = divCreate(blockres);
galdiv1.append(div);
};
img.src = item;##
Heading##
}, this);
}
imgFill();
}

var imageURLS = [];
var imageTags = [];
// Runs once when all images are loaded
function onAllImagesLoaded() {
}
// Individual image loaded Successfully
function onImageLoad() {
this.hasLoaded = true;
for (var i = 0; i < imageTags.length; ++i) {
if (!imageTags[i].hasLoaded) {
return; // Exit the function if any image hasn't loaded yet
}
}
onAllImagesLoaded();
}
// Individual image failed to load
function onImageError() {
console.warn("Error: image " + this.id + " could not be retrieved");
this.hasLoaded = true;
for (var i = 0; i < imageTags.length; ++i) {
if (!imageTags[i].hasLoaded) {
return;
}
}
onAllImagesLoaded();
}
function loadImages() {
var newImageTag = null;
for (var i = 0; i < imageURLS.length; ++i) {
newImageTag = new Image();
newImageTag.id = i; // Give each Image a unique identifier (Helps to find ones that don't load properly if you have any problems)
newImageTag.hasLoaded = false; // Add new 'hasLoaded' flag
newImageTag.onload = onImageLoad; // Set event handlers, It's better to use an existing function instead of an inlined one
newImageTag.onerror = onImageError; // This is because an inlined function will create a closure when called
newImageTag.src = imageURLS[i]; // This starts the async loading
imageTags.push(newImageTag);
}
}

How to retrieve data from a local var

i have this script in my html code
<script typre="text/javascript">
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
img[1] = new Image();
img[1].src = "../images/poggiatesta1.JPG";
for (var i = 0; i < img.length; i++) {
var imagetag = document.createElement("img");
var onclick = document.createAttribute("onclick");
onclick.value = "myfun("+i+")";
var sorc = document.createAttribute("src");
sorc.value = img[i].src;
var id = document.createAttribute("id");
id.value = "my_image" + i;
var clas = document.createAttribute("class");
clas.value = "my_image_clas";
imagetag.setAttributeNode(clas);
imagetag.setAttributeNode(onclick);
imagetag.setAttributeNode(sorc);
imagetag.setAttributeNode(id);
document.body.appendChild(imagetag);
};
function myfun(i) {
var src1 = document.getElementById('my_image' + i).src;
alert(src1);
}
</script>
It allows me to store the src of a selected image in a var. Now im trying to do a check, which means an alert message that pops out if i didnt select any images like this:
function controllo() {
if ((src1 == "") || (src1 == "undefined")) {
alert("Select an image.");
}
else {
location.href = "schienale.html";
}
}
Here's the problem, src1 is a local var, how can i retrieve its data in order to complete my check funcion?

You could store src1 as a global (it is better to use a namespace, but for the sake of this question a global will do)
<script typre="text/javascript">
var src1; //Notice i've declared the variable here.
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
...
Then in myFunc do:
function myfun(i) {
src1 = document.getElementById('my_image' + i).src;
alert(src1);
}
This will make src1 available everywhere.
Or, if possible, pass src1 into your controllo function.
This is the preferred method because it prevents cluttering the global namespace, but will require the code to be changed elsewhere.
This might help give you a hint though:
controllo(src1)
function controllo(src1) {
if ((src1 == "") || (src1 == "undefined")) {
alert("Select an image.");
}
else {
location.href = "schienale.html";
}
}

loading an unknown number of images

I'm trying to create a lightbox for my site, and I want it to load all the images from a given directory with a filename like image#.jpg.
This is the code I have:
for(var i=0; i<1000; i++)
{
var filename = "images/image"+i+".jpg";
$.get(filename)
.done(function() {
$('#lightbox').append('<img src="placeholder.gif">');
})
.fail(function() {
i=1000; //ugh
});
}
It kind of works, but only tries to load image1000.jpg.
Also, is there a better way to do something like this? I'm sure saying 'do this a ton of times and stop when I manually change the for loop counter' is frowned on.

If your image names are sequential like your said, you can create a loop for the names, checking at every iteration if image exists - and if it doesn't - break the loop:
var bCheckEnabled = true;
var bFinishCheck = false;
var img;
var imgArray = new Array();
var i = 0;
var myInterval = setInterval(loadImage, 1);
function loadImage() {
if (bFinishCheck) {
clearInterval(myInterval);
alert('Loaded ' + i + ' image(s)!)');
return;
}
if (bCheckEnabled) {
bCheckEnabled = false;
img = new Image();
img.onload = fExists;
img.onerror = fDoesntExist;
img.src = 'images/myFolder/' + i + '.png';
}
}
function fExists() {
imgArray.push(img);
i++;
bCheckEnabled = true;
}

Detect img src and then change it with javascript

This is my code:
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
document.getElementById('next').onmousedown = function () {
i = 0;
// it works up to here
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
It should work on imgur's horizontal layout albums, and replace the low-res images with full-res ones, one image at a time (currently displayed image).
On click of the "next" button, a new image is displayed. However, the script does not load the next full-res image. It only works with the first image loaded.

You're messing up your scope completely, invalidating the entire code after the first run. This should also pop up more than enough errors in your console. Reshuffle assignments to the right spot:
document.getElementById('next').onmousedown = function () {
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
Depending on how the page works specifically (I can't see without having a real world use case) you might have to reassign the entire mousedown event as well.

On every mousedown you are adding a new DOMAttrModified event listener.
Try arranging your code to something like following:
var pic = document.getElementById('image');
var i;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
//pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
i = 0;
});
document.getElementById('next').onmousedown = function () {
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
});
You should also try using the addEventListener instead of onmousedown

Why doesn't this Javascript image object get added to the image array?

I've been trying to create a small HTML5-based example, but I've ran into some problems. I want to render a rock on a <canvas> but this Javascript object won't work properly.
function ImageData() {
this.image_names = ["rock1"];
this.images = new Array();
this.loadResources = function () {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a) {
a.images[a.image_names[i]] = img;
console.log(a.images); //log is successful, image is in array
})(this);
img.src = "images/" + this.image_names[i] + ".png";
}
}
}
It's use is to be as follows:
var a = new ImageData();
a.loadResources();
var rock1_image = a.images["rock1"]; //the "rock1.png" image
If you try accessing the object via console, you'll see that there is no image in the image array, after being certain the image loaded. I can't figure out why it's not working. I've looked over it multiple times.
EDIT: Here is my final, working result:
function ImageData() {
this.image_names = ["rock1"];
this.images = new Array();
this.loadResources = function (callback) {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a, i) {
return function() {
a.images[a.image_names[i]] = img;
if (i == (a.image_names.length - 1)) callback();
};
})(this, i);
img.src = "images/" + this.image_names[i] + ".png";
}
}
}

I would venture to say that you are attempting to access it before it is added to your array. I would suggest adding a callback or something to your loadResources method to make sure that it's there before you attempt to access it.
this.loadResources = function (callback) {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a, i) {
return function() {
a.images[a.image_names[i]] = img;
console.log(a.images); //log is successful, image is in array
callback();
};
})(this, i);
img.src = "images/" + this.image_names[i] + ".png";
}
}
then
var a = new ImageData();
var rock1_image;
a.loadResources(function() {
rock1_image = a.images["rock1"];
// do whatever you need to do with the image in here.
});
Also, what #Igor mentions. I totally missed that. I adjusted the code above so you could keep your this scope without having to set it elsewhere.
Updated to take care of the i issue brought up by #RobD.

Remove (this) after onload handler definition. You are actually calling this function right away, assigning undefined (since it returns nothing) as img.onload value.

In the code:
> function ImageData() {
> this.image_names = ["rock1"];
> this.images = new Array();
> this.loadResources = function () {
> for (var i = 0; i < this.image_names.length; i++) {
> var img = new Image();
> img.onload = (function (a) {
This function will be run immediately and does not return a value, so undefined will be assigned. So no point in the assignment, just run the code.
> a.images[a.image_names[i]] = img;
Images is an array that is used as a plain object. Better to use a plain object then.
> console.log(a.images); //log is successful, image is in array
> })(this);
The outer this must be passed in because of the IIFE. Remove the IIFE and there is no requirement to pass this. And if a reference to the instance is stored in the function, it won't matter how the function is called (i.e. you won't have to set this in the call).
> img.src = "images/" + this.image_names[i] + ".png";
> }
> }
> }
You might want something like:
function ImageData() {
this.image_names = ['rock1'];
this.images = {};
imageData = this;
this.loadResources = function (callback) {
for (var i = 0; i < imageData.image_names.length; i++) {
var img = new Image();
imageData.images[a.image_names[i]] = img;
img.src = 'images/' + this.image_names[i] + '.png';
if (callback) {
img.onload = callback;
}
}
}
}
var a = new ImageData();
a.loadResources(function(){console.log('loaded: ' + this.src);}); // loaded: …
window.onload = function() {
document.body.appendChild(a.images.rock1); // image appears in document
}

I haven't tested your code yet, but I guess this is the problem:
You are trying to access your image before it was loaded. You can use callback event handler after it was load like:
var data = new ImageData();
data.loadResources(function(imgObj){
// imgObj is the newly load image here. Have fun with it now!
})