延迟加载图像加载页面上的所有图像

时间:2015-01-01 17:56:35

标签: javascript jquery lazy-loading jquery-lazyload

我正在使用bttrlazyloading插件来延迟加载我页面上的所有图片。 我有一个包含div的列表,每个div里面都有一个图像。

我的内容是动态的并且使用模板(html)我根据我需要的元素克隆div。

这是我的代码:

    $.each ( THIS.get('content').topics, function(i, topic){
                $('.topic_list').append($('#topic_item').clone(true).attr('id','topic_item'+i));
                $('#topic_item'+i).find('.topic_image').attr('id', 'topic_image_'+i);
                $('#topic_image_'+i).attr('data-bttrlazyloading-xs-src', topic.icons.high_res_icon_180x180);
                $('#topic_image_'+i).attr('data-bttrlazyloading-sm-src', topic.icons.high_res_icon_180x180);
                $('#topic_image_'+i).attr('data-bttrlazyloading-md-src', topic.icons.high_res_icon_360x360);
                $('#topic_image_'+i).attr('data-bttrlazyloading-lg-src', topic.icons.high_res_icon_360x360);
});

当我完成构建我的页面时,我正在调用插件:

$('.topic_image').bttrlazyloading({
            backgroundcolor: 'transparent',
            animation: 'fadeInUp',
            event: 'scroll'
        })

直到我滚动它们才会显示图像,我的问题是,即使您仍然看不到它们,图标也会立即全部加载。

我可以在网络上看到它。

我该如何解决?

1 个答案:

答案 0 :(得分:1)

不能相信..经过很长时间......我失踪了<!DOCTYPE html>