Как сделать так, чтобы скрипт jquery НЕ запускался до тех пор, пока его видимая часть не будет загружена? (собственно на экране пользователя)

Question

Итак, я искал весь день и не нашел ничего похожего на то, что я ищу. Я делаю одну из тех штук для подсчета чисел на веб-сайтах, число которых колеблется от 0 до (скажем, 100) и ниже, что говорит «удовлетворенность клиентов», потому что это выглядит хорошо, imo. однако, как только веб-сайт загружен, скрипт запускается, даже если счетчик не виден, поэтому, когда вы прокрутите вниз до него, он уже завершен. Как я могу заставить его не работать, пока он не загружен на экране? Код на данный момент:

---

HTML

<!-- jQuery number counter - animated -->
<div class="container-fluid padding">
<div class="row padding">
    <div class="counter col-xs-12 col-sm-6 col-md-4 countr-box">
      <h2 class="timer count-title count-number" data-to="98" data-speed="1500"></h2>
      <p class="count-text ">TEXT!!</p>
    </div>
        <div class="counter col-xs-12 col-sm-6 col-md-4 countr-box">
      <img src="img/logo.jpg" alt="logoo"></img>
    </div>
    <div class="counter col-sm-12 col-md-4 countr-box">
      <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
      <p class="count-text ">o <strong>yeet</strong> sample-text</p>
    </div>
</div>
</div>

CSS

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

.countr-box{
  padding: 25px;
  font-family: serif;
  text-align: center;
  border-radius: 100px;
  font-size: 100px;
}

javascript

$(function ($) {
    $.fn.countTo = function (options) {
        options = options || {};

        return $(this).each(function () {
            // set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults, {
                from:            $(this).data('from'),
                to:              $(this).data('to'),
                speed:           $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals:        $(this).data('decimals')
            }, options);

            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),
                increment = (settings.to - settings.from) / loops;

            // references & variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};

            $self.data('countTo', data);

            // if an existing interval can be found, clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer, settings.refreshInterval);

            // initialize the element with the starting value
            render(value);

            function updateTimer() {
                value += increment;
                loopCount++;

                render(value);

                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self, value);
                }

                if (loopCount >= loops) {
                    // remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;

                    if (typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self, value);
                    }
                }
            }

            function render(value) {
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };

    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

ПРИМЕЧАНИЕ. КОД JS НЕ МОЙ, ЕГО ОТ https://codepen.io/syedrafeeq/pen/rcfsJ

Answer 1

Попробуйте реализовать метод counter, как только вы прокрутите вниз до div в окне. Вы можете использовать что-то вроде этого:

    $(function() {
        var oTop = $('#counter').offset().top - window.innerHeight;
        $(window).scroll(function(){

            var pTop = $('body').scrollTop();
            console.log( pTop + ' - ' + oTop );   //just for your debugging
            if( pTop > oTop ){
                start_counter();
            }
        });
    });

    function start_counter(){
        alert('starting counter');
        //Add your code here
    }