插入JavaScript時未加載圖片

Question

我正在向表添加行。 對於每個新表項，將innerHTML設置為：

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>'

itemString變量是表項的名稱，而picurl變量是我從其Google登錄名獲得的用戶個人資料圖像的url。

一切正常，除了運行Javascript插入行時，用戶的個人資料圖片顯示為：

控制台未顯示任何錯誤消息。

如果立即刷新頁面，則圖像會正確顯示：

有沒有一種方法可以在插入行后立即強制加載圖像？

Answer 1

您應該預加載圖像，然后在加載該圖像后呈現新行。 這樣，您將立即看到圖像。

此外，您應該使用DOM API創建新的DOM元素。 這將使您不必執行繁瑣的字符串連接操作。

最后，您可能需要提前設置CSS類，然后將這些類應用於元素，而不是使用JavaScript創建內聯樣式（應盡可能避免使用內聯樣式）。

 // 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

預加載圖像：

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

並在img標簽中添加src。

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>'

讓我知道是否有幫助。

Answer 3

嘗試在picurl之前添加斜杠。 試試下面的東西

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>'