0

我想使用延迟加载到我的网站，但有一个小问题：我用 JS 滚动内容（用 X px 为内容设置动画），所以我不使用滚动条。可悲的是，在这种情况下不会触发延迟加载。有任何想法如何制作这个吗？

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

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

我在图片中的网站

4

3 回答 3

0

我能想到的就是在内容滑动时挂钩，然后如果这是您的目标，则使用 AJAX 添加图像或整个内容。插件通常会专注于大多数用例，因此延迟加载可能对您不利。

于 2012-09-15T12:24:36.580 回答
0

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

$(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(). 让我知道这是否适合您。:)

于 2012-09-15T12:28:43.857 回答
0

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

于 2012-09-16T12:55:59.947 回答