Question

我有这个javascript片段

var render_applist_entry = function (info) {
    var html = '<div class="row">';
    html += '<img src="static/images/generic_appicon_128.png" class="col-sm-2 va" />';
    html += '<div class="col-sm-7 va"><h4>'+info.image.name+'</h4></div>';
    html += '<div class="col-sm-2 va">';
    html += '<button id="'+info.mapping_id+'" name="action" value="start" class="start-button btn btn-primary"><i class="fa fa-spinner fa-spin" aria-hidden="true" style="display: none"></i> Start</button>';
    html += '</div>';
    html += '</div>';
    return html;
};

我使用$("#applist").html(htmlcode)添加它，但不幸的是在Chrome中我在渲染div的时间和加载图像的时间之间获得了令人不快的闪烁（图像更大，因此条目被重新格式化）

我尝试添加一个display：none并隐藏它以便一次性显示它，但实际上它不起作用。

请注意我不知道图像大小的先验，也不能使用javascript加载它。

我没有在Firefox中观察到这种效果（但我怀疑这很重要）。

Answer 1

创建一个永远不属于主DOM树的文档片段。我提供了MDN的文档。它与Firefox没有任何关系，也适用于Chrome。

从此MDN doc for Document Fragment：

通常的用例是创建文档片段，追加元素到文档片段然后将文档片段附加到 DOM树。在DOM树中，文档片段被全部替换它的孩子。

//Create a document fragment
var docFrag = document.createDocumentFragment();    
var divElem = document.createElement("div") ;
//Add the div element to the document fragment
docFrag.appendChild(divElem);
//Create class attribute
var classAttr = document.createAttribute("class");
classAttr.value = "row";
//Set the class attribute for the div element
divElem.setAttributeNode(classAttr);
//Repeat this for the img element 
var imgElem =  document.createElement("img");
var srcAttr = document.createAttribute("src");
srcAttr.value = "static/images/generic_appicon_128.png";
divElem.appendChild(imgElem);
//****************************************************
//Repeat the element creation for all your html tags 
//****************************************************
//Finally add your document fragment to your html. It will only trigger one reflow and 
$("#applist")[0].appendChild(docFrag);

关于文档片段的同一页面上的注释：

由于文档片段在内存中而不是主要部分 DOM树，将子项附加到它不会导致页面重排（元素位置和几何的计算）。因此，使用文档片段通常会带来更好的性能。

如何防止由于jquery添加img标签

1 个答案: