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

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/