在我的页面上的许多地方,我都使用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无法正常工作吗? 怎么修 ?

#1楼 票数:1

检查演示

HTML

<input type="button" onclick="fn()" value="load Image" >

JQUERY

function fn(){
  $('<img>')
    .data('original','https://www.google.co.in/logos/doodles/2015/126th-anniversary-of-the-public-opening-of-the-eiffel-tower-4812727050567680-hp.jpg')
    .addClass('lazy')
    .appendTo('body')
  ;
  setTimeout(function(){
       $("img.lazy").lazyload(); 
  },100);      
 }

#2楼 票数:1

只需使用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>

这是一个演示: http : //jsfiddle.net/osnwer4w/3/

  ask by Michael Phelps translate from so

未解决问题?本站智能推荐:

3回复

动态创建元素上的jQuery(悬停和加载)事件绑定

我可以将click事件绑定到具有类名keybox元素。 并且该元素是动态生成的。 但是对于同一元素,我尝试使用以下代码绑定hover和load事件: ....并且无法正常工作。 有人可以解决这个问题吗? 我想将hover和load事件绑定到具有类名keybox元素,并且
1回复

JQuery ui Tabs如何动态创建元素?

您好,我有以下的HML页面。 我需要将jQuery ui Tabs插件应用于动态添加的元素。 我该怎么办。 请注意,当我添加<li>元素作为可以正常工作的字符串时,但是当我使用document.createElement时,它不起作用,而是当我检查这些元素时得到了相同的html
3回复

jQuery动态创建元素

我有一个使用ColorBox的JavaScript函数。 <a rel链接指向自动分配给日期的文件夹(即20140806)。 我将如何使其更加高效,所以不必像下面的示例那样在每个日期中都这样做
3回复

延迟加载jQuery元素

所以我有一个li元素列表,我试图一一加载。 因此,您点击了该页面,第一个使用css transform: translateX()进入transform: translateX()从左侧移入transform: translateX()并淡入。然后下一个,依此类推。 我的index.
1回复

动态创建元素的视频addEventListener

你知道为什么我从这里得到一个错误“无法创建null的事件监听器”: 另外,有没有办法在jquery对象上使用视频标记方法(例如,通过jquery创建视频标记)? 我编辑下面的答案是正确的,但需要进行同行评审。 这是解决方案:
2回复

Jquery UI:动态创建元素的按钮

我想在我的所有输入提交中添加jQuery UI按钮。 这适用于普通按钮,但它不适用于我动态创建的按钮。 有人知道怎么做吗?
3回复

动态创建元素的事件绑定

我刚刚开始探索javascript和jquery,并真诚地感谢我目前进退两难的困境。 我正在尝试构建的功能涉及许多步骤: 'enter'键触发一个事件。 输入字段中的适当值(“关于”,“联系人”或“额外”)将打开一个新页面。 然后克隆并插入输入字段(驻留在<p&
1回复

动态创建元素上的角度模块

我有一个现有的控制器和模板: 它完美地工作。 但是现在我需要从项目中删除模板(该模板在DOM中有固定的位置),并在按一下按钮时以某种方式使其动态显示。 当我尝试使用jQuery 我的Angular模块根本不起作用。 所以我想我每次有人按下按钮时都需要重新注册模块,是这样吗?