0

私のウェブサイトには、IDがdivののdivが画面に表示されているか画面上にスクロールしているかどうかを検出するコードがあります。 divが表示されている場合、classdivに追加され、divの内部に背景画像がロードされます。その目的は、サイトをより高速に読み込むためにイメージをlazyloadすることです。私のウェブサイトのIE6/7でJavaScriptが動作しない

IE 6/7を除くすべてのブラウザで機能しています。誰かが、これらのIEブラウザで動作しないようにするために、以下のコードが間違っていると教えてもらえますか?

function $(a){ 
    return document.getElementById(a) 
} 
function scrll(){ 
    function a(d){ 
     var f=d.offsetTop, 
      e=d.offsetLeft, 
      c=d.offsetWidth, 
      b=d.offsetHeight; 
     while(d.offsetParent){ 
      d=d.offsetParent; 
      f+=d.offsetTop; 
      e+=d.offsetLeft 
     } 
     return(f<(window.pageYOffset+window.innerHeight) 
      &&e<(window.pageXOffset+window.innerWidth) 
      &&(f+b)>window.pageYOffset&&(e+c)>window.pageXOffset) 
    } 
    if(a($("photo"))){ 
     $("imgholder").className="pic11 pic21"; 
     if(window.removeEventListener){ 
      window.removeEventListener("scroll",scrll,false) 
     }else{ 
      if(window.detachEvent){ 
       window.detachEvent("onscroll",scrll) 
      }else{ 
       window.onscroll=null 
      } 
     } 
    } 
} 
if(window.addEventListener){ 
    window.addEventListener("scroll",scrll,false); 
}else{ 
    if(window.attachEvent){ 
     window.attachEvent("onscroll",scrll); 
    }else{ 
     window.onscroll=scrll; 
    } 
} 
setTimeout(scrll,1); 

コードは私のウェブサイト上でアクティブになっている:http://www.ericperrets.info/

+3

でいるのですか?いくつかの 'console.log()'や 'alert()'文を投げて、あなたのコードが実行されているかどうか確認できますか? (また、 '$(" imgholder ")。className =" pic11 pic21 ";'部分をonloadハンドラに置くだけで、同様の効果を得ることはできませんでした。ページが終了しましたか?) – nnnnnn

+0

私の場合、 'onload'ハンドラは理想的ではありません。なぜなら、私のサイトはモバイルデバイス用に最適化されていて、誰かが実際にスクロールしてイメージを表示するまでリソースを使いたくないからです。写真セクション。 – Eric

+0

私は、Macで開発しているので、コードをデバッグするためにInternet Explorerにアクセスすることはできません( 'alert' /' console.log'呼び出しを追加してください)。 – Eric

答えて

2

IEはinnerHeightを持っていません。代わりに、この機能を使用します。

function getWindowHeight() 
{ 
    if (window.innerHeight) return window.innerHeight; 
    if (window.document.documentElement.clientHeight) return window.document.documentElement.clientHeight; 
    return window.document.body.clientHeight; 
} 

はまた、ブラウザ間の違いを説明する良い記事では動作しませんどの部分http://www.howtocreate.co.uk/tutorials/javascript/browserwindow