フォーカスを失ったときにフェードエフェクトのリフレッシュを繰り返す

Question

私はウェブ開発を初めて使いました。

しかし、私は問題に遭遇しましたが、わかりません。私がブラウザのタブに焦点を当てていないとき、自分の画像が変更されたときに行ったフェード効果は、何度もオンになります。

もう1つの問題は、私のdiv要素の中にある画像が、ブラウザのサイズを変更するときにhttp://jsfiddle.net/eb51hxj1/のようになることです。

<div class="divImage"> 
    <img id="image"> </div> 
<div> 

私のコードです：

https://jsfiddle.net/a2bsarfb/

Answer 1

ウィンドウのフォーカスをチェックする新しいVARを行います。ウィンドウのフォーカスがなくなったら、残りのコードをスキップします。発信者機能の追加で

var lostFocus = false; 

：

if(lostFocus){ return false; } 

だから、それは次のようになります。

function Caller() { 
    var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"]; 
    var numarImagini = imag.length - 1; 
    var i = Math.floor((Math.random() * imag.length)); 
    Rotate(imag[i], i); 
    i++; 
    setInterval(function() { 
    if(lostFocus){ return false; } 
    if (i > imag.length - 1) { 
     i = 0; 
     Rotate(imag[i], i); 
     i++; 
    } else { 
     Rotate(imag[i], i); 
     i++; 
    } 
    }, 2000) 
} 

と下部に最上部に新しいVARを追加で

イベントリスナーを追加：

window.onblur = function() { lostFocus = true; }; 
window.onfocus = function() { lostFocus = false; };