jQuery Lazy加载动画滚动

jQuery Lazy load for animated scrolling

本文关键字：滚动 动画 加载 Lazy jQuery      更新时间：2023-09-26

我想使用Lazy加载到我的网站，但有一个小问题：我用JS滚动内容（用X px动画内容），所以我不使用滚动条。遗憾的是，在这种情况下不会触发懒惰负载。你知道怎么做吗？

我的网站水平滚动，所有内容div浮动在彼此附近，只有当前内容可见，所有其他内容都在display: none; 上

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

我的站点在图片中

我所能想到的就是在内容滑动时挂钩，然后用AJAX添加图像或整个内容，如果这是你的目标的话。插件通常会关注大多数用例，所以懒惰加载可能对您不利。

我只需要编写自己的简单懒惰加载脚本：

$(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()。如果这对你有用，请告诉我。：）

好吧，几个小时后我决定使用JAIL。不是最好的解决方案，但总比没有好，因为我对AJAX JAIL（又名jQuery异步图像加载器）很笨

相关文章：