javascript - 使用 jQuery .html 插入图像

Question

我有一个以美​​元计算的计数器。每个数字以及美元符号和逗号都使用图像显示在页面上。我使用 display: flex;在我的容器 div 和 flex 中:1 1 auto；在保存图像的 div 上。我使用此 CSS 以便它在添加更多数字时全部缩小。

这是查看问题的 jsfiddle。 https://jsfiddle.net/0mvy8hqo/

这是我正在使用的 CSS

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

我还使用 jQuery 根据我在代码中设置的一些数学运算每秒更新一次计数器。这一切都很好。我唯一的问题是，如果页面上显示的图像数量足以使图像缩小，那么当我让我的 javascript 随着计数器的增加用新图像替换图像时，图像以全尺寸开始，然后缩小以适合容器。因此，不仅仅是看起来数字在变化，你有我想要摆脱的这种扩展/收缩效果。这种情况持续大约一分钟，然后停止。我猜停止与浏览器的缓存有关，但我不确定。

这是我正在使用的 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 提到的，你必须预加载 Assets

我附上了带有预加载功能的 fiddle

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/