使用jQuery .html插入图像

Question

I have a counter that counts in dollars. Each number, as well as the dollar sign and comma, are all displayed on the page using images. I use display: flex; in my container div and flex: 1 1 auto; on the divs that hold the images. I use this CSS so that it all shrinks as more numbers are added.

Here is a jsfiddle to see the issue. https://jsfiddle.net/0mvy8hqo/

Here is the CSS I am using

.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;
}

I also use jQuery to update the counter every second based on some math I have set up in my code. This all works just fine. My only issue is that if the amount of images displayed on the page is enough that the images shrink then when I have my javascript replace the images with new images as the counter increases, the images start out at full size and then shrink to fit the container. So rather than it just looking like the number is changing, you have this expand/shrink effect that I would like to get rid of. This happens for about a minute then it stops. I am guessing the stopping has something to do with the browser's cache, but I am not sure.

Here is the Javascript I am using.

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

This is a loading problem.

Either use preloading or (better) specify a width:

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

Note: i have not measured your actual widths, only roughly estimated them.

Answer 2

Like @ZPiDER mentioned you have to preload the assets

I have attached the fiddle with preload functionality

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/