datasrc、live、およびInviewプラグインを使用してビューポートにスクロールすると、イメージがフェードします。

Question

私はこれにひどく近づいている、またはクラックアップ、私はまだどちらか確かではない。多分両方。

は、私は（素敵な全体のワールド・ワイド・ウェブに、apprently tumblrがで動作するだけ1、）無限スクロールジャバスクリプトを経由して（いくつかの非常に大きな）ページにロードする一連の画像http://syndex.me

を持っています多くの研究の後、私はinview pluginのフォークを見つけるために来て、私は後になっているようだ。私はそれを使用する2つの方法があり、それぞれに大きな問題があります。

---

方法1

この方法の問題点は、私はコンソールログの数百を得ることです。私は、このプラグインの要点は、非常に特殊なイベントが起きたときにやることだと思っていました。つまり、imgが表示されました。私はimgsが動的に読み込まれるので、ライブを使用する必要があります。私はバインドを解除しようとしました、伝言などを止めようとしませんでした。

$('img').live('inview', function(event, isInView, visiblePartX, visiblePartY) { 
    if (isInView) { 
     //fadein the image 
     console.log("I've just done something") 
    } 
    }); 

---

方法2（http://syndex.meでデモ）

イメージは、すぐに彼らは（位置、ない不透明度）をロード終わったような位置に "ジャンプ"。

それが100％ロードされますまで、ブラウザは画像の高さを知らないので、私はthatsのはい、と言って人々を想像することができます。しかし、私は無数のサイトがこれを行うことができたのを見ました。たぶん私は "負荷"を使用せずにこれを行う必要がありますか？しかし、それは何でしょうか？

$(function() { 
$('img[data-src]').live('inview', function(event, isVisible) { 
    if (!isVisible) { return; } 

    var img = $(this); 

    // Show a smooth animation 
    img.load(function() { img.parent().animate({ opacity: 1 }); }); 

    // Change src 
    img.attr('src', img.attr('data-src')); 

    // Remove it from live event selector 
    img.removeAttr('data-src'); 
    console.log(img.height()) 
}); 
}); 

Answer 1

これを試すとどうなりますか。http://www.appelsiini.net/projects/lazyload。

あなたは非常に簡単に同じことを達成することができます

...幸運！

===================================== EDIT ========私はhttp://syndex.meを経て、それらがロードされていない================================

OK、特定の画像ではなく、チェックすると、ページ全体をajax経由で読み込んでいます。

まあ、戻って問題に来ることができます。ビューポートに要素があるかどうかを追跡する方法を追跡する場合は、これは非常に簡単です。

あなただけの窓（高さ、縦スクロールがここで働いている場合）のDIMENTIONを取得する必要があります。 ウィンドウでスクロールイベントをバインドし、element.offsetTopを確認し、document.body.scrollTop - window.innerHeightと比較して、element.offsetTopが大きいかどうかを確認します。はいの場合は、タダ！それはビューポートにあります。当初、および[多田！]を条件に、元SRCと画像のデータ-src属性を設定し

、src属性に設定し、データ-src属性を削除します。

イメージにsrc属性を設定しているときは、常にdata-srcが使用可能かどうかを確認して、data-srcを削除するとその再設定が複数回行われないようにします。

井戸構造は次のようになります。それはW3の検証でエラーをスローしないように、デフォルトで

var winHeight = window.innerHeight, 
    winPos = document.body.scrollTop, 
    elePos = element.offsetTop; 

window on scroll = function(){ 
    winPos = document.body.scrollTop; // get the current position 
    winHeight = window.innerHeight; // get the current height as what if window is resized 

    if(elePos > winPos - winHeight){ 
     // Tada! this is in the viewport 

     if(image.getAttrubute("data-src")){ 
      image.setAttribute("src") = image.getAttrubute("data-src"); 
      image.removeAttribute("data-src"); 
     } 
    } 
} 

は、あなたが、すべての画像の上にプレースホルダーを置くことができます。

イメージでは、loadイベントをバインドしてアニメーション化できます。それは最初は目に見えないようにしておいてください。

これは実際のコードではなく、擬似的なコードです。構文がないロジックを見てください。

これはあなたを助けると思う！