动态创建元素的延迟加载

Question

On my page in many places I use lazyload effect .
Plugin url http://www.appelsiini.net/projects/lazyload . For images I added class "lazy" and

  <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>

But in other page I dinamic created images with class "lazy" but lazyload don't work ? How to fix ?

Answer 1

check DEMO

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);      
 }

Answer 2

Just use lazySizes . This lazyloader is developed with dynamic content in mind. No need to trigger an event or to sacrifice separation of concerns by calling methods at different spots in your JS.

Simply use:

<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>

Here is a demo: http://jsfiddle.net/osnwer4w/3/