要素が表示されているときにスクリプトを実行

Question

要素がビューにあるときに実行するようにこのスクリプトを修正できますか？言い換えれば、実行するまで表示されるまで待つ必要があります。ありがとう！ -Dan

$('.amount-chart').each(function(){ 
var $chart = $(this), 
    size = parseFloat($chart.outerWidth()), 
    clearSet; 

$chart.css({ 
    height: size 
}) 
.easyPieChart({ 
    size: size, 
    animate: 2000, 
      onStep: function(from, to, currentValue) { 
       $(this.el).find('span.amount-counter').text(Math.round(currentValue)); 
      } 
}); 

$(window).on('resize', function(){ 

    size = parseFloat($chart.outerWidth()); 

    $chart.css({ 
     height: size 
    }); 

    //clearTimeout(clearSet); 
    //clearSet = setTimeout(function(){ 
     $chart.removeData('easyPieChart').find('canvas').remove(); 
     $chart.easyPieChart({ 
     size: size, 
     animate: 1 
     }); 
    //}, 100); 
});  

}）;

Answer 1

詳細な説明をいただきありがとうございます。 demo

HTML

<div id="el">Pie Chart</div>  

を見たJavaScript

var inited = false 
function init() { 
    // init your chart 
    // code here run once on element with id="el" will in viewport 
} 

$(window).on('scroll', function() { 
    if (inited) { 
    return 
    } 

    if (el.offsetTop >= window.innerHeight + document.body.scrollTop) { 
    inited = true 
    init() 
    } 
})