Double image display on button when dynamically set image from javascript
<p>I'm having an issue when button images are dynamically set. </p>

<p>I have a HTML div which will contain a set of buttons (these buttons will be created dynamically by using javascript), each button will have an Id. By default, this div is hidden and will be displayed only after clicking on a "Display Button" button.</p>

<pre><code>&lt;body onload="getButtonSet()"&gt;
   &lt;div id="btn-container"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>When clicked on "Display Button" button, the system will retrieve button's image by calling a function that will query to database to get the image, then use JQuery to insert image to each button in the buttons set.</p>

<pre><code>function setButtonIcon(resultSet) {
    var mimeType = resultSet[0].mimetype;
    var imgData = resultSet[0].documentbody;
    var buttonId = '#' + resultSet.Id;
    var imgSrc = "data:" + mimeType + ";base64," + imgData;
    var buttonControl = $('#btn-container').contents().find(buttonId);
    var imgControl = '&lt;div class="div-img"&gt; &lt;img class="btn-icon" src="' + imgSrc + '"&gt;&lt;/div&gt;'
    $(imgControl).prependTo(buttonControl);
};
</code></pre>

<p>Secondly, I have another button to clear buttons in buttons set and hide the div.</p>

<pre><code>$('#btn-container').setVisible(false);
</code></pre>

<p>Everything works fine unless I have a large sized image or if the network gets slow. If I clear the container div data (using <code>$('#btn-container').empty()</code>) and hide it when the large sized image <strong>has not</strong> completed loading and set to the button then click on the button to display the div immediately (Note that this function will create the sets of button and query again), the button will display 2 images with the same content on that button.</p>

<p>Does anyone know to fix it ?</p>

<p>Note that the id of buttons in the buttons set cannot be changed. </p>

<p>Update: Query from CRM Function</p>

<pre><code>    var getButtonSet = function () {
        var query = Xrm.Page.context.getClientUrl() +
            "/api/data/v8.0/entityname?$select=field_1,field_2&amp;$orderby=order_field asc";
        getData(query, getButtonSetSuccessCallback, getDataFailCallback, true);
    };

function getData(queryUrl, successCallback, failCallback, async) {
    var req = new XMLHttpRequest();
    req.open(consts.method.get, queryUrl, async);
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type",  "application/json;charset=utf-8");
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Prefer", "odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"");
    req.onreadystatechange = function () {
        if (this.readyState === 4) {
            req.onreadystatechange = null;
            if (this.status === 200) {
                var results = JSON.parse(this.response);
                // success callback
                successCallback(results);
            }
            else {
                var error = JSON.parse(this.response).error;
                // fail callback
                failCallback(error);
            }
        }
    };
    req.send();
}
</code></pre>