用於動態創建元素的延遲加載

在我的許多地方的頁面中，我使用了lazyload效果。
插件網址http://www.appelsiini.net/projects/lazyload。對於圖像我添加類「懶」和用於動態創建元素的延遲加載

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

但在其他頁面我DINAMIC創造了一流的圖像「懶」，但lazyload不工作？怎麼修？

來源

2015-03-31 Michael Phelps

您已經創建了新的圖像後，申請對他們的lazyload插件。 – 2015-03-31 11:43:41

您如何創建動態圖像？請添加代碼 – 2015-03-31 12:12:32

查看我的答案。 – 2015-03-31 12:38:35

檢查DEMO

HTML

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

JQUERY

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

來源

2015-03-31 12:34:41

只需使用lazySizes。這個懶惰加載器是在考慮動態內容的情況下開發的。無需觸發事件或通過調用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/

來源

2015-03-31 22:02:11

用於動態創建元素的延遲加載

回答

相關問題