Develop Reference

Javascript image width is 0 on load

I have this code for loading several images:
const imageURLS = ["lvls/1.png", "assets/tileatlas.png"];
let imageCount = imageURLS.length;
let assets = [];
function imageLoaded(i){
imageCount--;
if(imageCount == 0){
window.TILEATLAS = assets[0];
load();
}
}
function loadAssets(){
for(let i = 0, len = imageCount; i < len; i++){
let image = new Image();
image.src = imageURLS[i];
assets.push(image);
image.onload = imageLoaded(image);
}
}
onload = loadAssets();
but when I try to access the images in the load() functions, it says the width and height are 0, for me indicating the images aren't finished loading, but they should be? I'm dumbfounded...

The problem is this line:
image.onload = imageLoaded(image);
Because you have the parenthesis, Javascript calls the function immediately and expects it to return the result that will be passed to the onload
You need something like this:
const imageURLS = ["lvls/1.png", "assets/tileatlas.png"];
let imageCount = imageURLS.length;
let assets = [];
function imageLoaded(){
var i = this
imageCount--;
if(imageCount == 0){
window.TILEATLAS = assets[0];
load();
}
}
function loadAssets(){
for(let i = 0, len = imageCount; i < len; i++){
let image = new Image();
image.src = imageURLS[i];
assets.push(image);
image.onload = imageLoaded.bind(image);
}
}
onload = loadAssets();
The bind function sets the value of this in the function to the argument. This way, it won't call the function, but create it.

I'm trying to add images to my flickity carousel from an array and using a for loop

adding cell elements to the main carousel.
Having trouble what to put in the img tag
for (let i = 0; i < imageArray.length; i++) {
$('.main-carousel').each(function(){
$(this).append("<div class='carousel-cell'><img
src='imageArray???'</div>");
});
}

var imageArray = ['imageURL1.png', 'imageURL2.png', 'imageURL3.png'];
for (let i = 0; i < imageArray.length; i++) {
$('.main-carousel').each(function() {
$(this).append('<div class='carousel-cell'><img
src="'+imageArray[i]+'"></div>');
});
}

Get the source of images from table cell

I am trying to get to the img.src of these table cells, but am going wrong somewhere.
var cell = newTable.rows.cells;
var content = newTable.getElementsByTagName('img');
var nodeArray = [];
for(var i = 0; i < content.length; ++i)
{
nodeArray[i] = content[i];
}
var listThem = $(this).attr('src');
console.log(listThem);

Use this :
var content = newTable.getElementsByTagName('img');
for(var i = 0; i < content.length; i += 1) {
var source = content[i]['src'];
//do something
}
getElementsByTagName() returns an array of dom elements.
To access the "src" attribute of a dom element, you can do this : element.src or element['src'];
source will contain the image source.

Preloading images with javascript does not work

I'm trying to preload images with javascript:
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png',
'../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
In Html:
<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')"
onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" />
But request is still sending to server after mouseover. Is not working only in chrome

As noted within my comment, you are passing an array of arrays to the preLoadImages method.
As a result, you are passing an array to image[i].src which means it won't get loaded.
Try
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
or, if you want to keep the array of array's, then use
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i][0];
}
}
Edit, on further investigation, a possible cause is preloadImages destroys the image array after preloading the images.
try this instead:
function preloadImages(sources) {
window.preloadedImages = new Array();
for (var i = 0; i < sources.length; i++) {
window.preloadedImages[i] = new Image();
window.preloadedImages[i].src = sources[i];
}
}
This stores the preloaded images within the window object, allowing them to preload properly.
Hope that helps?

find all images on page with specific url and delete it using java script

im trying to find all images on page with a specifc url /images/icons/bollWhiteDown.gif
and delete or change them can it be done?
and how?
thank you

To remove the IMG tags you can do something like this:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
Based on OP's comment:
<script type="text/javascript">
window.onload = function() {
var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {;
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
}​
</script>

try this
var images = document.getElementsByTagName('img');
for (var img in images){
if(images[img].src == '/images/icons/bollWhiteDown.gif'){
images[img].parentNode.removeChild(images[img])
}
}

You can do something like this:
var imgs = document.getElementesByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src == "/images/icons/bollWhiteDown.gif") {
imgs[i].src = "somethingelse";
}
}