Contator só inicia quando div estiver visível na tela

Olá galera tenho um contador e queria que ele só começasse quando a div for vista na tela.

<script type="text/javascript"> $(document).ready(function (){ $('.spincrement').spincrement({ from: 0.0, decimalPlaces:0, duration: 5000, }). }). </script>

 <div id="horario"> <?php
$dateTime = new DateTime('2015-08-13 00:00:00'). $dataAtual = new DateTime(). // Irá depender da hora do servidor, no meu caso, para o teste eu configurei a hora para '2012-11-26 16:14:59'
$diferenca = $dateTime->diff($dataAtual). $minutosDecorridos = ((($diferenca->format('%a') * 24) + $diferenca->format('%h')) * 60) + $diferenca->format('%i') -300. $vitimas_cafe = floor($minutosDecorridos / 60). $projetos_fim = floor($minutosDecorridos / 480). $horas_trab = floor($minutosDecorridos / 180). $cafes = $vitimas_cafe + 2500. $projetos = $projetos_fim + 9500. $horas = $horas_trab + 25300. $metro = $vitimas_cafe + 12354.?> <div id="img-horario"> <div class="wrap4"> <ul> <li class="liH2" style="margin-right: 145px. "> <img src="images/hora/02.png"> <h1 class="spincrement"><?php echo "$horas"?></h1> <h2 style=" margin-left: 13px. ">HORAS TRABALHADAS</h2> </li> <li class="liH2" style="margin-right: 145px. margin-top: 14px. "> <img src="images/hora/03.png"> <h1 class="spincrement"><?php echo "$projetos"?></h1> <h2 style=" margin-left: 8px. ">PROJETOS FINALIZADOS</h2> </li> <li class="liH2" style="margin-right: 145px. margin-top: 21px. "> <img src="images/hora/01.png"> <h1 class="spincrement"><?php echo "$metro"?></h1> <h2 style=" margin-left: 12px. ">METROS DE IMPRESSÃO</h2> </li> <li class="liH2" style=" margin-top: -3px. 

 <img src="images/hora/04.png"> <h1 class="spincrement"><?php echo "$cafes"?></h1> <h2 style="margin-left: 30px. ">XÍCARAS DE CAFÉ</h2> </li> </ul> </div> </div> </div>