bootstrap 轮播图效果 图片延迟加载

作者: 一渡
发布时间:2015-08-07 10:12:58

bootstrap 框架可以从以下几个方面进行优化处理

1 使用更好的方法加载拟态窗口,通过写php脚本查询数据,填充到拟态窗口中,实现数据的预加载。

2 更好的设计代码结构 尽量不依赖额外的库来操作拟态窗口,尽量的减少请求,减少带宽的使用。

3 bootstrap大轮播图的图片延迟加载的解决方案

代码:

function lazyContainer(searchNode) {
   $(searchNode).find('.active').find('img.lazy').each(function() {
       var imgSrc = $(this).attr('data-src');
       if (imgSrc) {
           $(this).attr('src',imgSrc);
           $(this).attr('data-src','');
       }
   });
}

$('#targetId').bind('slid.bs.carousel', function() {
    lazyContainer(this);
});

lazyContainer('#targetId');

1 使用data-src替代src属性

2 为图片元素加lazy class

3 用#id替换#targetId


 

centrepieces 最引人注目的部分; 

出处 http://joshjzaslow.com/blog/lazy-loading-images-in-bootstrap-carousels/

标签: Bootstrap
来源:http://www.cnblogs.com/dreamone/articles/4688326.html

推荐: