My goal is to shift the width of a div as specific images load in my application. I have tried reading the div's current width, adding 128 to it, and then using the .css() function to update the div's new width. However, I have encountered an issue where the .css() function only updates the width on the last image that is loaded, rather than updating it as each image loads. I am unsure why this is happening. Here is the code I am using:
document.getElementById('back').onload = function(){
var width = $("#LoadingBar").css("width").replace(/[^-\d\.]/g, '');
width = parseInt(width);
var newwidth = width + increment;
newwidth = newwidth +"px";
$('#LoadingBar').animate({width:newwidth},"fast");
if(width == 1280) {
//I display another div once all the images have loaded
$("#everything").show();
}
}
Do you have any suggestions on what may be causing this issue?