使用 datasrc、live 和 Inview 插件滚动到视口时图像会淡入淡出。

Question

我非常接近破解这个问题，或者破解，我还不确定是哪一个。也许两者都有。

我通过无限滚动 javascript 在页面上加载了一系列图像（有些相当大）（显然是整个万维网上唯一可以与 tumblr 配合使用的图像，很好）http://syndex.me

经过大量、大量的研究，我终于找到了 inview 插件 这似乎就是我想要的。我有两种使用它的方法，每种方法都有很大的问题。

---

方法 1

此方法的问题是我会收到数百个控制台日志。我认为这个插件的全部意义在于当一个非常具体的事件发生时执行 doStuff。即一个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())
 });
});

Answer 1

好吧，如果你尝试一下这个： http://www.appelsiini.net/projects/lazyload。

你可以很容易地实现同样的目标......祝你好运！

=======================================编辑============ ==============================

好的，所以我浏览了 http://syndex.me，并且它们不会加载特定图像，而是通过 ajax 加载整个页面（如果您检查的话）。

好吧，让我们回到问题上来。如果您想跟踪如何跟踪某个元素是否进入视口，那么这非常简单。

您只需要获取窗口的尺寸（如果垂直滚动在此处工作，则为高度）。
在窗口上绑定滚动事件并检查 element.offsetTop 并将其与 document.body.scrollTop - window.innerHeight 进行比较，以了解 element.offsetTop 是否更大。如果是的话，田田！那是在视口中。

最初使用原始 src 设置图像中的 data-src 属性，并在 [tada!] 条件下，将其设置为 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 验证中引发错误。

在图像上，您可以绑定加载事件以使其具有动画效果。因为一开始就让它不可见。

这是一段粗略的（类似伪）代码，而不是实际的代码。所以看逻辑而不是语法。

好吧，我想这会对你有帮助！