Время видимости объекта - PullRequest
Новая
       10

Время видимости объекта

0 голосов
/ 24 июня 2018

Я хочу знать, виден ли объект (хотя бы 50%) или нет.Вот что я сделал с этим кодом.

Я бы хотел улучшить свой код, чтобы узнать, как долго этот объект был виден.Я не знаю, как взять дату, когда она прибывает в область просмотра, и взять дату, когда она больше не видна.

Мой код возвращает в консоли все «истина» и «ложь» при каждой прокрутке, поэтому можно ли взять дату в первом «истине» и принять новую дату, когда она становится «ложной»?

Заранее спасибо, 

<html>
<head>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img id="image_test" width="300" height="200" src="https://image.flaticon.com/icons/svg/23/23656.svg" alt="100" />
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
    window.onload = function() {
		var isInViewport = function (elem) {
    		var bounding = elem.getBoundingClientRect();
    		return (
        	bounding.top >= -0.5 * elem.height &&
        	bounding.left >= 0 &&
       		bounding.bottom <= 1.15 * (window.innerHeight || document.documentElement.clientHeight) && 
        	bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    		);
		};
		
		var player = document.getElementById('image_test');
		
		window.addEventListener('scroll', function () {
			canUserSeeIt = isInViewport(player);
			console.log(canUserSeeIt);
		}, false);

};		
    
</script>
</body>
</html>

1 Ответ

0 голосов
/ 25 июня 2018

Этот модифицированный код скажет:

  • Как долго объект был виден в миллисекундах

  • Когда объект стал невидимым 

    window.onload = function() {
    var start = new Date();
    var stillVisible = true;
    var isInViewport = function (elem) {
        var bounding = elem.getBoundingClientRect();
        return (
        bounding.top >= -0.5 * elem.height &&
        bounding.left >= 0 &&
        bounding.bottom <= 1.15 * (window.innerHeight || document.documentElement.clientHeight) && 
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    var player = document.getElementById('image_test');

    window.addEventListener('scroll', function () {
        canUserSeeIt = isInViewport(player);
        if (stillVisible && !canUserSeeIt){
          var now = new Date(); // Becomed invisible
          stillVisible = false;
          var visibleTime = now - start; // How long has been visible
          console.log(now, visibleTime);
        }
        console.log(canUserSeeIt);
    }, false);

    };

https://jsbin.com/wuqegedeyo/edit?html,output

...