Image is not loaded when JavaScript inserts <IMG SRC=

Question

I am adding rows to a table. For each new table item, the innerHTML is being set to:

picCell.innerHTML = '<label for="checkbox-a" data-form="ui-btn-up-a"
                            class="'+uncheckedClassString+'" 
                            style="font-size: 200%; width: ' +
                            tableCellWidth + 'px" 
                            id="' + checkBoxIdPreamble +
                            index+'">' + itemString + ' 
                       <img src="' + picurl + '" width="30px" 
                            height="30px"/>
                     </label>'

The itemString variable is the table item's name and the picurl variable is the url for the user's profile image that I get from their Google login.

It all works fine except that when the Javascript runs to insert the row, the user's profile image appears as:

The console shows no error messages.

If the page is immediately refreshed then the image appears correctly:

Is there a way to force the image to be loaded as soon as the row is inserted?

Answer 1

You should preload the image and then render the new row after that image has loaded. This way, you'll see the image immediately.

Additionally, you should create new DOM elements using the DOM API. This will allow you to not have to do the bulk of that messy string concatenation.

Lastly, you may want to set up CSS classes ahead of time and then just apply those classes to your elements, rather than using JavaScript to create inline styles (which should really be avoided when possible).

 // Generate the image element first var img = document.createElement("img"); // Configure the image's style img.classList.add("customImgage"); // Set up a load event handler binding for the image img.addEventListener("load", makeRow); // Set up a load event handling function that will fire AFTER // the image is loaded. function makeRow() { // Create and configure the label var lbl = document.createElement("label"); lbl.for = "checkbox-a"; lbl.setAttribute("data-form", "ui-btn-up-a"); lbl.classList.add(uncheckedClassString); lbl.style.width = tableCellWidth; lbl.id = checkBoxIdPreamble + index; lbl.textContent = itemString; // Append the image into the label. At this point, the image // is loaded and ready to be displayed. lbl.appendChild(img); // Append the label into the picCell picCell.appendChild(lbl); } // Preload the image. After this is done, the load event handler will fire // causing makeRow to run, which will create the label, add the image to it // and then insert the fully ready row and image into the DOM img.src = picurl; 

 .customImage { width:30px; height:30px; } .uncheckedClassString { font-size:200%; } 

Answer 2

Preload the image:

 var img=new Image();
    img.src=picUrl;

and add the src in the img tag.

picCell.innerHTML = '<label for="checkbox-a" data-form="ui-btn-up-a"
                        class="'+uncheckedClassString+'" 
                        style="font-size: 200%; width: ' +
                        tableCellWidth + 'px" 
                        id="' + checkBoxIdPreamble +
                        index+'">' + itemString + ' 
                   <img src="' + img.src + '" width="30px" 
                        height="30px"/>
                 </label>'

Let me know if that helps.

Answer 3

Try to add a slash before the picurl. Try something like below

picCell.innerHTML = '<label for="checkbox-a" data-form="ui-btn-up-a" class="'+uncheckedClassString+'" style="font-size: 200%; width: '+tableCellWidth+'px" id="'+checkBoxIdPreamble+index+'">'+itemString+' <img src="/'+picurl+'" width="30px" height="30px"/></label>'