Question

我想在我的网站上使用Lazy load，但是有一点问题：我用JS滚动内容（用X px动画内容），所以我不使用滚动条。遗憾的是，在这种情况下，延迟加载不会触发。有任何想法如何制作这个？

我的网站水平滚动，所有内容div - s彼此靠近，只有当前的一个可见，所有其他内容都在display: none;

这是我网站上不那么专业的照片：我用黑色标记了可见区域，用红色标记了移动部件。

Answer 1

我能想到的只是在内容幻灯片时插入，然后使用AJAX添加图像或整个内容，如果这是你的目标。插件通常会关注大多数用例，因此延迟加载可能对您不利。

Answer 2

我只想编写自己的简单延迟加载脚本：

$(function(){
  $('img').each(function(){
    var $this = $(this)
    $this.data('origImg',$this.attr('src'))
    $this.removeAttr('src') // or set a placeholder img
  })
  var $window = $(window), $container = $('#sliding_content')
  window.lazyLoad = function () {
    $container.find('img:not([src])').each(function(){
      var $this = $(this), left = $this.offset().left
      if (!(left < 0) && !(left > $window.width()))
        $this.attr('src',$this.data('origImg'))
    })
  }
})

然后当div动画时，请致电lazyLoad()。如果这对您有用，请告诉我。：）

Answer 3

好的，几个小时后我决定使用JAIL。不是最好的解决方案，但是因为我对AJAX JAIL aka jQuery Asynchronous Image Loader

感到愚蠢，所以总比没有好

jQuery Lazy加载动画滚动

3 个答案: