Question

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

我在页面上加载了一系列图片（有些非常大），通过无限滚动javascript（唯一适用于tumblr，在整个万维网上，很好）{ {3}}

经过多次研究，我找到了http://syndex.me的叉子，这似乎是我所追求的。我有两种方法可以使用它，每种方法都有很大的问题。

方法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 （inview plugin演示）

图像在加载完成后立即“跳转”到位（位置，而不是不透明度）。

我可以想象人们说，是的，因为浏览器在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是否更大。如果是的话，tada！在视口中。

最初使用原始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验证上抛出错误。

在图像上，您可以绑定load事件以使其动画化。为此，最初保持隐形。

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

嗯，我认为这会对你有所帮助!!

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

1 个答案: