Question

我有一个以美元计的柜台。每个数字以及美元符号和逗号都使用图像显示在页面上。我用display：flex;在我的容器div和flex：1 1 auto;在持有图像的div上。我使用这个CSS，以便随着更多数字的添加而缩小。

这是一个了解问题的方法。 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

这是一个加载问题。

使用预加载或（更好）指定宽度：

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

注意：我没有测量你的实际宽度，只粗略估计它们。

Answer 2

就像@ZPiDER提到的那样，你必须预先加载资产

我已经附加了预装功能

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/

使用jQuery .html插入图像

2 个答案: