jQuery .htmlを使用して画像を挿入する

Question

私はドルでカウントするカウンタを持っています。それぞれの数字とドル記号とカンマは、すべてイメージを使用してページに表示されます。私はdisplay：flexを使います。私のコンテナでdivとflex：1 1 auto;画像を保持するdivに私はこのCSSを使用して、より多くの数字が追加されるにつれてすべて縮小するようにします。

ここに問題を見るjsfiddleがあります。ここで https://jsfiddle.net/0mvy8hqo/

は、私はまた、私は私のコードに設定しているいくつかの数学に基づいてカウンタを毎秒を更新するためのjQueryを使用し

.i15-counter .i15-counter-inner { display: flex; } 
.i15-counter .i15-counter-inner .i15-counter-number { flex: 1 1 auto; max-width: 110px; padding: 20px 0px; background-color: #333; } 
.i15-counter .i15-counter-inner .i15-counter-dollar { flex: 1 1 auto; max-width: 76px; padding: 20px 0px; background-color: #333; } 
.i15-counter .i15-counter-inner .i15-counter-comma { flex: 1 1 auto; max-width: 40px; padding: 20px 0px; background-color: #333; } 
.i15-counter .i15-counter-inner .i15-counter-first { 
    padding: 20px 0px 20px 20px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 
.i15-counter .i15-counter-inner .i15-counter-last { 
    padding: 20px 20px 20px 0px; 
    -webkit-border-top-right-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

を使用していCSSです。これはすべて正常に動作します。私の唯一の問題は、ページに表示される画像の量が十分であれば、画像が縮小してから、JavaScriptがカウンタを増やして画像を新しい画像に置き換えたときに、画像がフルサイズで始まり、コンテナ。だから、数字が変わってきているように見えるのではなく、あなたが取り除きたい拡大/縮小効果があります。これは約1分間発生し、停止します。私は停止がブラウザのキャッシュと関係があると推測していますが、わかりません。

ここに私が使用しているJavascriptがあります。

function number_format (number, decimals, dec_point, thousands_sep) { 
    // Strip all characters but numerical ones. 
    number = (number + '').replace(/[^0-9+\-Ee.]/g, ''); 
    var n = !isFinite(+number) ? 0 : +number, 
     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), 
     sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, 
     dec = (typeof dec_point === 'undefined') ? '.' : dec_point, 
     s = '', 
     toFixedFix = function (n, prec) { 
      var k = Math.pow(10, prec); 
      return '' + Math.round(n * k)/k; 
     }; 
    // Fix for IE parseFloat(0.55).toFixed(0) = 0; 
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); 
    if (s[0].length > 3) { 
     s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); 
    } 
    if ((s[1] || '').length < prec) { 
     s[1] = s[1] || ''; 
     s[1] += new Array(prec - s[1].length + 1).join('0'); 
    } 
    return s.join(dec); 
} 

function updateCounters(id) { 
    var current = parseInt(jQuery('.i15-counter-'+id+'-current').val()); 
    var next = parseInt(jQuery('.i15-counter-'+id+'-next').val()); 
    var rate = parseInt(jQuery('.i15-counter-'+id+'-rate').val()); 
    var image_url = jQuery('.i15-counter-'+id+'-image-url').val(); 

    var new_current = current + rate; 

    if(new_current <= next) { 
    var new_current_formatted = number_format(new_current, 0); 
    var new_current_formatted_adddollar = '$' + new_current_formatted; 
    var new_current_split = new_current_formatted_adddollar.split(""); 
    //console.log(new_current_formatted); 
    var numbercount = 1; 
    var numbertotal = new_current_split.length; 
    var counter_html = ""; 

    jQuery.each(new_current_split, function(i, val) { 
     var number_ends = ""; 
     if(numbercount == 1) { 
     number_ends += " i15-counter-first"; 
     } 

     if(numbercount == numbertotal) { 
     number_ends += " i15-counter-last"; 
     } 

     var anumber_class = "i15-counter-number"; 
     if(val == "$") { val = "dollar"; anumber_class = "i15-counter-dollar"; } 
     if(val == ",") { val = "comma"; anumber_class = "i15-counter-comma"; } 

     counter_html += '<div class="' + anumber_class + number_ends + '"><img src="' + image_url + 'counter_' + val + '.png" /></div>'; 
     numbercount++; 
    }); 

    jQuery('.i15-counter-container-'+id).html(counter_html); 
    jQuery('.i15-counter-'+id+'-current').val(new_current); 
    } 
} 

jQuery(document).ready(function($) { 

    window.setInterval(function(){ 
    jQuery(".i15-counter").each(function() { 
     updateCounters(jQuery(this).data('id')); 
    }); 
    }, 1000); 

}) 

Answer 1

@ZPiDERはあなたが資産に

をプリロードする必要が言及したように私は、あなたが作業jsfiddleを提供することができプリロード機能

var images = new Array(); 
     function preload() { 
      for (i = 0; i < preload.arguments.length; i++) { 
       images[i] = new Image() 
       images[i].src = preload.arguments[i] 
      } 
     } 

https://jsfiddle.net/0mvy8hqo/1/

Answer 2

これは負荷の問題です。

のいずれかを使用プリロードまたは（より良い）が幅を指定：

var width = 110; 
    if(val == "$") { val = "dollar"; anumber_class = "i15-counter-dollar"; width = 100; } 
    if(val == ",") { val = "comma"; anumber_class = "i15-counter-comma"; width = 60; } 
    counter_html += '<div class="' + anumber_class + number_ends + '">" + 
     "<img src="' + image_url + 'counter_' + val + '.png" width=' + width + ' /></div>'; 

注：私はあなたの実際の幅を測定していないが、大まかにしかそれらを推定しました。