菜单

bootstrap 图片轮播效果

2018年11月15日 - Bootstrap

bootstrap 框架可以从以下几独面拓展优化处理

前端大牛:冯鲁哲  1033850519  承接各种web开发业务 
 欢迎洽谈——-鲁大师

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

 

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

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” >
<style>
body{padding:10px;margin:10px;}
</style>
</head>
<body>

3 bootstrap大轮播图的图形延迟加载的缓解方案

<div id=”slidershow” data-ride=”carousel”>
<!– 设置图片轮播的一一 –>
<ol >
<li data-target=”#slidershow” data-slide-to=”0″>1</li>
<li data-target=”#slidershow” data-slide-to=”1″>2</li>
<li data-target=”#slidershow” data-slide-to=”2″>3</li>
</ol>
<!– 设置轮播图片 –>
<div >
<div >
<a ><img
src=”http://images3.c-ctrip.com/rk/201407/ll580x145.jpg”
alt=””></a>
<div >
<h3>图片标题1</h3>
<p>描述内容1…</p>
</div>
</div>
<div >
<a ><img
src=”http://images3.c-ctrip.com/dj/201408/zj/zj\_580145.jpg”
alt=””></a>
<div >
<h3>图片标题2</h3>
<p>描述内容2…</p>
</div>
</div>
<div >
<a ><img
src=”http://images3.c-ctrip.com/dj/201408/zqgq\_580145.jpg”
alt=””></a>
<div >
<h3>图片标题3</h3>
<p>描述内容3…</p>
</div>
</div>
</div>
<a role=”button” data-slide=”prev”>
<span ></span>
</a>
<a role=”button” data-slide=”next”>
<span ></span>
</a>
</div>
<script
src=”http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt;
<script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
</body>
</html>

代码:

 

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

1 使用data-src替代src属性


2 为图元素加lazy class

3 用#id替换#targetId


 

centrepieces 最引人注目之局部; 

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


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图