在我的页面上很多地方我使用了lazyload效果。
插件网址 http://www.appelsiini.net/projects/lazyload .
对于图像,我添加了类“lazy”和
<input type="button" onclick="fn()" >
<script type="text/javascript">
$(function() {
fn()
$("img.lazy").lazyload();
});
function fn(){
var img = document.createElement('img');
img.setAttribute('data-original','bg.jpg')
img.className='lazy'
document.body.appendChild(img);
}
</script>
但是在其他页面中,我动态创建了类为“lazy”的图像,但是 lazyload 不起作用?如何修复?
最佳答案
只需使用 lazySizes .这个 lazyloader 是在考虑动态内容的情况下开发的。无需通过在 JS 的不同位置调用方法来触发事件或牺牲关注点分离。
只需使用:
<input type="button" onclick="fn()" value="add image">
<img data-src="http://lorempixel.com/400/200/" class="lazyload" />
<script>
function fn() {
var img = document.createElement('img');
img.setAttribute('data-src', 'http://lorempixel.com/400/200/')
img.className = 'lazyload';
document.body.appendChild(img);
}
fn();
</script>
关于javascript - 动态创建元素的延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29367660/