2011-10-27 48 views
3

我相當接近破解這個,或開裂,我不知道哪些呢。也許都是。使用datasrc,live和Inview插件滾動到視口中時淡入圖像。

我有一系列的通過無限滾動的JavaScript的網頁上加載(一些比較大的)圖像(與tumblr apprently工作,對整個萬維網唯一一個,很漂亮)http://syndex.me

經過大量的研究,我已經找到了inview plugin的分支,這似乎是我所追求的。我有兩種使用方式,每種都有很大的問題。


方法1

這種方法的問題是它我得到數百控制檯日誌。我認爲這個插件的重點就是在發生非常特殊的事件時做出反應。即img開始出現。我必須使用live,因爲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%加載之前不知道圖像的高度。但是我看到無數的網站都能做到這一點。也許我需要這樣做,而不使用「加載」呢?但那會是什麼?

$(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()) 
}); 
}); 

回答

0

好吧,那麼如果你試試這個:http://www.appelsiini.net/projects/lazyload

你可以很容易達到...祝你好運!

=====================================編輯======== ================================

好吧,所以我通過了http://syndex.me,他們沒有加載一個特定圖像,而不是他們通過ajax加載整個頁面,如果你檢查。

那麼,讓我們回到問題。如果您想跟蹤如何跟蹤某個元素是否進入視口,那麼這非常簡單。

你只需要得到窗口的高度(如果垂直滾動在這裏工作,則爲高度)。 在窗口上綁定滾動事件並檢查element.offsetTop並將其與document.body.scrollTop - window.innerHeight比較以確定element.offsetTop是否較大。如果是的話,田田!那是在視口中。

在初始src和[tada!]條件下設置圖像中的data-src屬性,將其設置爲src屬性並刪除data-src屬性。

在設置圖像中的src屬性時,請始終檢查data-src是否可用,以便在刪除data-src時重新設置不會發生多次。

阱結構應該是:

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"); 
     } 
    } 
} 

默認情況下,你可以把一個佔位符的每一個形象,所以不扔在W3號驗證錯誤。

在圖像上,您可以綁定加載事件以使其動畫化。爲了保持它最初不可見。

這是一個粗糙的(像僞)代碼,而不是實際的代碼。所以看到的邏輯不是語法。

嗯,我認爲這會幫助你!

+0

雖然這可能在理論上回答這個問題,但[這將是更可取的](http://meta.stackexchange.com/q/8259)在這裏包含答案的基本部分,並提供參考鏈接。 –