我相當接近破解這個,或開裂,我不知道哪些呢。也許都是。使用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())
});
});
雖然這可能在理論上回答這個問題,但[這將是更可取的](http://meta.stackexchange.com/q/8259)在這裏包含答案的基本部分,並提供參考鏈接。 –