Develop Reference

JavaScript: How to load images sequentially

Sorry about my English, this is not my native language.
I'm trying to compress multiple images from a input file. But when I tried to put the
img.onload = function() {}
inside the for loop that contains the sequence of files, the results of the append are totally out of order.
I need the images in sequence because I am mounting a PDF with the images, bus number, and photo date.
The original images are too big, 3MB+. And the resultant .pdf file is 62MB. It's unavailable.
var filesInput = $("#file"); filesInput.on("change", function(e) {
$("#divImagesFrame").show();
/* Manipulação das fotos */
var files = e.target.files;
var result = $("#divImagesFrame");
var filesLength = this.files.length;
var page = 1;
var count = 6;
$("#blur, #pageName").html($("#txtCliente").val());
result.append("<div class='pageTitle'><div class='pageBox'>" + page + "</div><span>" + $("#txtCliente").val() + "<span class='localName'>" + $("#txtCampanha").val() + "</span></span></div>");
for (let i = 0; i < this.files.length; i++) {
qtdFotos++;
let url = URL.createObjectURL(this.files[i]);
let img = new Image();
img.src = url;
console.log("ID outside img.load: " + i);
img.onload = function(){
console.log("ID inside img.load: " + i);
var busNumber = files[i].name.toString().split(".")[0];
var dataFoto = files[i].lastModified;
var d = new Date(dataFoto);
d.toLocaleString();
var canvas = document.createElement('canvas');
canvas.width = 460;
canvas.height = 360;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
var imageFile = canvas.toDataURL("image/JPEG", 1.0);
/* In this result.append, if I put the image source = img.src the order of images stay ok, but the size is much larger */
result.append("<div class='imageFrame' style='width:460px; border-radius:10px; height:360px; float:left; margin:14.01px 20px; box-shadow:1px 1px 3px 0.8px #999;'>" +
"<div style='float:left;border-radius:10px 10px 0 0; background:linear-gradient(-90deg,#105e86,#125e86); display:block; width:450px; height:40px; font-weight:550; font-size:23px; line-height:40px; padding-left:10px; color:#FFF;'>" + busNumber + "<span style='font-size:18px; float:right; margin-right:20px;'>" + d.toLocaleDateString() + "</span></div>" +
"<img width='460px' height='320px' style='border-radius:0 0 10px 10px; margin-bottom:5px;' src='" + imageFile + "'/></div>");
}
}
sammiCreateBook();
});
Here is how it has to be:
And here is the result of img.load, totally out of order.
I hope can you help me, thank you very much.
Problem solved
Hi guys. Thank you. The problem has been solved using javascript promises to verify if each function has been completed. Thanks again!

Store the image's URLs in an array
Define a function which executes your loading behaviour (the block inside your for loop)
At the beginning of your function you need to take the first URL from that array and remove it
At the end of your function body you need to invoke the function again.
Invoke the function.
Here's an example:
var images = [
'1.jpg',
'2.jpg',
'3.jpg',
];
var loadImage = function() {
if (!images.length) {
// Will be executed when all images are loaded
return;
}
var image = images.shift();
console.log('loading image ' + image);
// Your for-loop logic here
...
img.onload = function() {
console.log('image loaded ' + image);
// Your onload logic here ...
// -> important!
loadImage();
};
}
loadImage();

JavaScript: set background image with size and no-repeat from random image in folder

I am a javascript newbie...
I'm trying to write a function that grabs a random image from a directory and sets it as the background image of my banner div. I also need to set the size of the image and for it not to repeat. Here's what I've got so far, and it's not quite working.
What am I missing?
$(function() {
// some other scripts here
function bg() {
var imgCount = 3;
// image directory
var dir = 'http://local.statamic.com/_themes/img/';
// random the images
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
// array of images & file name
var images = new Array();
images[1] = '001.png',
images[2] = '002.png',
images[3] = '003.png',
document.getElementById('banner').style.backgroundImage = "url(' + dir + images[randomCount] + ')";
document.getElementById('banner').style.backgroundRepeat = "no-repeat";
document.getElementById('banner').style.backgroundSize = "388px";
}
}); // end doc ready

I messed around with this for a while, and I came up with this solution. Just make sure you have some content in the "banner" element so that it actually shows up, because just a background won't give size to the element.
function bg() {
var imgCount = 3;
var dir = 'http://local.statamic.com/_themes/img/';
// I changed your random generator
var randomCount = (Math.floor(Math.random() * imgCount));
// I changed your array to the literal notation. The literal notation is preferred.
var images = ['001.png', '002.png', '003.png'];
// I changed this section to just define the style attribute the best way I know how.
document.getElementById('banner').setAttribute("style", "background-image: url(" + dir + images[randomCount] + ");background-repeat: no-repeat;background-size: 388px 388px");
}
// Don't forget to run the function instead of just defining it.
bg();

Here's something sort of like what I use, and it works great. First, I rename all my background images "1.jpg" through whatever (ex. "29.jpg" ). Then:
var totalCount = 29;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.getElementById("div1").style.backgroundImage = 'images/'+num+'.jpg';
document.getElementById("div1").style.backgroundSize="100%";
document.getElementById("div1").style.backgroundRepeat="fixed";
}
Then run the function ChangeIt() .

Use javascript to write html around loop

I'm using the javascript from this older script: JavaScript: how to load all images in a folder?
However, I want to use the same javascript file to write some html code before the loop and some after the loop, all using this same javascript file.
Just putting a document.write before and after it in the javascript doesn't work.
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);
document.write('Loaded ' + i + ' image(s)');
return;
}
if (bCheckEnabled) {
bCheckEnabled = false;
img = new Image();
img.onload = fExists;
img.onerror = fDoesntExist;
img.src = 'assets/' + i + '.png';
document.write('<img src="assets/' + i + '.png" width="1016" height="813" alt="Kar" />');
}
}
function fExists() {
imgArray.push(img);
i++;
bCheckEnabled = true;
}
function fDoesntExist() {
bFinishCheck = true;
}

You may be using this example code incorrectly. Its intent appears to be to pre-load the image files in the background, not display them to the user in the HTML (yet). This is to improve apparent download speed of your page.
In short, this code doesn't actually render the image into the DOM; and that is intentional behavior.

Preloading images not working in Firefox?

I am preloading images like so:
$(function() {
window.onload = function() {
// Preloading colorized hover images
var bildliste_color = new Array();
var j;
for (j = 0; j < 14; j++) {
bildliste_color[j] = "images/works/work_art/middle/work_middle_art" + (j+1) + ".png";
}
var image_color = new Array();
for (j=0; j < bildliste_color.length; j++) {
image_color[j] = new Image();
image_color[j].src = bildliste_color[j];
}
// Preloading work_art_large_images
var bildliste_large = new Array();
var i;
for (i = 0; i < 14; i++) {
bildliste_large[i] = "images/works/work_art/large/work_large_art" + (i+1) + ".png";
console.log(i);
console.log(bildliste_large[i]);
}
var image_large = new Array();
for (i=0; i < bildliste_large.length; i++) {
image_large[i] = new Image();
image_large[i].src = bildliste_large[i];
}
}
});
I am preloading those images so that these are being cached and not being dowloaded again, when they are needed on hover.I achieved that with the jquery hover function like so:
$(document).ready(function() {
$("#incontent_work_art img").hover(function() {
oldsrc = $(this).attr("src");
var newsrc = $(this).attr("src").replace("images/works/work_art/middle/work_middle_art01sepia.png", "images/works/work_art/middle/work_middle_art1.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art02sepia.png", "images/works/work_art/middle/work_middle_art2.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art03sepia.png", "images/works/work_art/middle/work_middle_art3.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art04sepia.png", "images/works/work_art/middle/work_middle_art4.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art05sepia.png", "images/works/work_art/middle/work_middle_art5.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art06sepia.png", "images/works/work_art/middle/work_middle_art6.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art07sepia.png", "images/works/work_art/middle/work_middle_art7.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art08sepia.png", "images/works/work_art/middle/work_middle_art8.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art09sepia.png", "images/works/work_art/middle/work_middle_art9.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art10sepia.png", "images/works/work_art/middle/work_middle_art10.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art11sepia.png", "images/works/work_art/middle/work_middle_art11.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art12sepia.png", "images/works/work_art/middle/work_middle_art12.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art13sepia.png", "images/works/work_art/middle/work_middle_art13.png");
newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art14sepia.png", "images/works/work_art/middle/work_middle_art14.png");
$(this).attr("src", newsrc);
}, function() {
$(this).attr("src", oldsrc);
});
});
This is for sure not the best code in the world but I am still learning. The current problem is that if I hover over an image it most of the time gets downloaded again by firefox. Even though I can see that all images were being downloaded by firefox previously. Sometimes the images are being loaded from the cache by firefox but it seems that after some amount of time the image is being downloaded again. I tested this also with opera und Chromium and it works well there. So why is Firefox downloading the image again and again and again? I want them to be cached!
I'd appreciate any good advice.
EDIT: It also works in IE. Could it possibly be that the problem is being caused because the preloaded images are not being added to the window.document.images array? In essence not in the DOM? My problem seems to be a bit if not fully related to this:
Image preloading isn't working for images in FireFox
But unfortunately no solutions were given.

Since you completely replace the old URLs by new ones, the garbage collector may decide to free memory because it doesn't know whether you'll use them again. You can't really assume how Firefox works (nor IE nor any other browser). Your best bet would be to have both sets of images in the web page at the same time and use the stylesheet display:none to select which set you don't want to show.

Resizing dynamic images not working more than one time

I've got a little problem here. I've been trying to do an image gallery with JavaScript but there's something that I got a problem with. I can get the image to resize when the first image load, but as soon as I load another image, it won't resize anymore! Since the user will be able to upload a lot of different size pictures, I really need to make it work.
I've checked for ready-to-use image gallery and such and nothing was doing what I need to do.
Here's my javascript:
function changeCurrentImage(conteneur)
{
var img = conteneur.getElementsByTagName("img");
var imgUrl = img[0].src;
var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
var currentImg = document.getElementById('currentImage');
currentImg.src = imgFirstPart + "borne" + imgLastPart;
resize(document.getElementById('currentImage'), 375, 655);
}
function resize(img, maxh, maxw) {
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxw){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};
Here's the HTML (using ASP.Net Repeater):
<asp:Repeater ID="rptImages" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<a href="#">
<div id="thumbnailImageContainer1" onclick="changeCurrentImage(this)">
<div id="thumbnailImageContainer2">
<img id="thumbnailImage" src="<%# SiteUrl + Eval("ImageThumbnailPath")%>?rn=<%=Random()%>" alt="Photo" onload="resize(this, 60, 105)" />
</div>
</div>
</a>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>

Most likely the image is not yet downloaded so img.height and img.width are not yet there. Technically you don't need to wait till the whole image is downloaded, you can poll the image in a timer until width and height are non-zero. This sounds messy but can be done nicely if you take the time to do it right. (I have an ImageLoader utility I made for this purpose....has only one timer even if it is handling multiple images at once, and calls a callback function when it has the sizes) I have to disagree with Marcel....client side works great for this sort of thing, and can work even if the images are from a source other than your server.
Edit: add ImageLoader utility:
var ImageLoader = {
maxChecks: 1000,
list: [],
intervalHandle : null,
loadImage : function (callback, url, userdata) {
var img = new Image ();
img.src = url;
if (img.width && img.height) {
callback (img.width, img.height, url, 0, userdata);
}
else {
var obj = {image: img, url: url, callback: callback,
checks: 1, userdata: userdata};
var i;
for (i=0; i < this.list.length; i++) {
if (this.list[i] == null)
break;
}
this.list[i] = obj;
if (!this.intervalHandle)
this.intervalHandle = setInterval(this.interval, 30);
}
},
// called by setInterval
interval : function () {
var count = 0;
var list = ImageLoader.list, item;
for (var i=0; i<list.length; i++) {
item = list[i];
if (item != null) {
if (item.image.width && item.image.height) {
item.callback (item.image.width, item.image.height,
item.url, item.checks, item.userdata);
ImageLoader.list[i] = null;
}
else if (item.checks > ImageLoader.maxChecks) {
item.callback (0, 0, item.url, item.checks, item.userdata);
ImageLoader.list[i] = null;
}
else {
count++;
item.checks++;
}
}
}
if (count == 0) {
ImageLoader.list = [];
clearInterval (ImageLoader.intervalHandle);
delete ImageLoader.intervalHandle;
}
}
};
Example usage:
var callback = function (width, height, url, checks, userdata) {
// show stuff in the title
document.title = "w: " + width + ", h:" + height +
", url:" + url + ", checks:" + checks + ", userdata: " + userdata;
var img = document.createElement("IMG");
img.src = url;
// size it to be 100 px wide, and the correct
// height for its aspect ratio
img.style.width = "100px";
img.style.height = ((height/width)*100) + "px";
document.body.appendChild (img);
};
ImageLoader.loadImage (callback,
"http://upload.wikimedia.org/wikipedia/commons/thumb/" +
"1/19/Caerulea3_crop.jpg/800px-Caerulea3_crop.jpg", 1);
ImageLoader.loadImage (callback,
"http://upload.wikimedia.org/wikipedia/commons/thumb/" +
"8/85/Calliphora_sp_Portrait.jpg/402px-Calliphora_sp_Portrait.jpg", 2);

With the way you have your code setup, I would try and call your resize function from an onload event.
function resize() {
var img = document.getElementById('currentImage');
var maxh = 375;
var maxw = 655;
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxw){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};
function changeCurrentImage(conteneur)
{
var img = conteneur.getElementsByTagName("img");
img.onload = resize;
var imgUrl = img[0].src;
var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
var currentImg = document.getElementById('currentImage');
currentImg.src = imgFirstPart + "borne" + imgLastPart;
}
I would play around with that. Maybe use global variables for your maxH/W and image ID(s);

#Comments: No, I can't do that server side since it would refresh the page everytime someone click on a new image. That would be way too bothersome and annoying for the users.
As for the thumbnails, those image are already saved in the appropriate size. Only the big image that shows is about 33% of its size. Since we already have 3 images PER uploaded images, I didn't want to upload a 4th one for each upload, that would take too much server space!
As for the "currentImage", I forgot to add it, so that might be helful lol:
<div id="currentImageContainer">
<div id="currentImageContainer1">
<div id="currentImageContainer2">
<img id="currentImage" src="#" alt="" onload="resize(this, 375, 655)" />
</div>
</div>
</div>
#rob: I'll try the ImageLoader class, that might do the trick.

I found an alternative that is working really well. Instead of changing that IMG width and height, I delete it and create a new one:
function changeCurrentImage(conteneur)
{
var thumbnailImg = conteneur.getElementsByTagName("img");
var thumbnailImgUrl = thumbnailImg[0].src;
var newImgUrl = thumbnailImgUrl.replace("thumbnail", "borne");
var currentImgDiv = document.getElementById('currentImageContainer2');
var currentImg = currentImgDiv.getElementById("currentImage");
if (currentImg != null)
{
currentImgDiv.removeChild(currentImg);
}
var newImg = document.createElement("img");
newImageDiv = document.getElementById('currentImageContainer2');
newImg.id = "currentImage";
newImg.onload = function() {
Resize(newImg, 375, 655);
newImageDiv.appendChild(newImg);
}
newImg.src = newImgUrl;
}
Also, in case people wonder, you MUST put the .onload before the .src when assigning an a new source for an image!