Question

我想使用延迟加载图片（例如http://www.appelsiini.net/projects/lazyload）。

问题是我想整合而不用src =“1px.gif”data-original =“foo1.jpg”重写img标签。相反，我想简单地在某个类中添加我以前的图像（例如在CMS等中），例如。

<div class="lazyLoad">
  <img src="foo1.jpg" width="800px" height="600px" alt="foo1" />
  <img src="foo2.jpg" width="800px" height="600px" alt="foo2" />
</div>

将页面加载转换为

<div class="lazyLoad">
  <img src="1px.gif" data-original="foo1.jpg" width="800px" height="600px" alt="foo1" />
  <img src="1px.gif" data-original="foo2.jpg" width="800px" height="600px" alt="foo2" />
</div>

然后它将实现它的实际延迟加载魔法。

有人知道这方面的解决方案吗？

Answer 1

当然，如果您还控制CMS如何向前台提供信息，您只需交换以下变量的que占位符。

如果你不能做服务器端（php / asp / etc）并且你可以注入一些javascript，你可以使用jQuery，在DOM加载后但是图像避风港不，那就改变它自己的。它不会像第一个解决方案那样优雅（因为你的浏览器可能会预加载一些图像），但总而言之它会起作用。

// jQuery example
$(".lazyLoad img").each(function(index) {               // selects all img within lazyLoad
   $(this).attr('data-original', $(this).attr('src'));  // inserts a new attribute with the original src
   $(this).attr('src', "1px.gif");                      // put src as the 1px.gif
});

You can see an implementing of it in jsFiddle.
（单击结果窗格加载图像）

这是概念证明。我强烈建议你做这个服务器端！

在指定类中使用普通DOM的延迟加载？

1 个答案: