延迟加载在引导轮播中不起作用
lazy load not work in bootstrap carousel
我使用引导程序 3 创建轮播,如下所示:
.HTML:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://rivathemes.net/html/envor/img/posts/3.jpg" class="img-big">
</div>
<div class="item">
<img data-lazy-load-src="http://rivathemes.net/html/envor/img/posts/4.jpg" class="img-big">
</div>
</div>
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left fa-lg"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right fa-lg"></i></a>
</div>
</div>
并添加此代码以添加延迟加载img
。
.JS:
$('#myCarousel').on('slid', function () {
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
但是,这对我不起作用!? 可以解决这个问题吗?
重要问:我可以为延迟加载添加图像预加载器吗?!
演示 : 小提琴
dm4web的答案不考虑通过直接单击轮播指示器跳过幻灯片。无论您如何滑动,此版本都可以正确加载图像,使用 Bootstrap 的event.relatedTarget
(正在滑入到位的项目,请参阅官方文档)。尝试运行下面的代码片段并单击指示器以向前切换几张幻灯片。
var cHeight = 0;
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
var $nextImage = $(e.relatedTarget).find('img');
$activeItem = $('.active.item', this);
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/5000x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5001x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5002x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5003x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5004x1000">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
http://jsfiddle.net/ys4je40u/
- 将类添加到项对象
lazy-load
- 使用
slide.bs.carousel
事件
.CSS:
.lazy-load {
background: url("http://www.mozart.it/images/preloader.gif") center center no-repeat;
}
JQ:
var cHeight = 0;
$('#myCarousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});
如果您的幻灯片中有多个图像,则必须使用以下内容:
var cHeight = 0;
$('#carousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// => Changes here !
// prevents the loaded images if it is already loaded
$nextImage.each(function(){
var $this = $(this),
src = $this.data('original');
if (typeof src !== "undefined" && src != "") {
$this.attr('src', src)
$this.data('original', '');
}
});
});
几个月前创建了这个"有点通用"的解决方案,到目前为止没有任何问题......
var $ajaxCarousel = $('.carousel-ajax');
if ($ajaxCarousel.length > 0) {
$ajaxCarousel.on('slide.bs.carousel', function (e) {
var $upcomingImage = $(e.relatedTarget).find('img');
if (typeof $upcomingImage.attr('src') === 'undefined') {
$upcomingImage.attr('src', $upcomingImage.data('src'));
}
});
// preload first image
$ajaxCarousel.each(function() {
var $firstImage = $(this).find('[data-slide-number=0]').find('img');
$firstImage.attr('src', $firstImage.data('src'));
});
}
在HTML中,您所要做的就是将"carousel-ajax"类添加到现有的轮播中,并在img的src标签前面加上"data-":
<img data-src="..." />
相关文章:
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- Jquery(多读/少读)在从数据库加载整个数据后不起作用
- 加载后的页面与ajax表单提交不起作用
- jQuery加载完成事件不起作用
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- 使用requireJS的jqGrid-网格加载但不起作用
- 加载自定义类在ExtJs中不起作用
- jQuery Mobile pageinit在第一次加载页面上不起作用(可复制)
- jquery ias插件不适用于我的网站,加载更多项目不起作用
- getUserMedia()在使用Ajax加载时不起作用
- 同一页面上的 mysql 中的 Ajax 加载表不起作用
- 按钮在第一次成功的 ajax 数据加载后不起作用
- 谷歌将部分页面加载后自动完成不起作用 ASP.Net MVC
- 具有资源视图的完整日历在 ASP.NET MVC 中不起作用,加载时 - 0x800a01bd - javaScript
- 延迟加载在引导轮播中不起作用
- 通过 id 获取元素不起作用,加载完整页面后在控制台中签入仍然没有线索
- jQuery fadeOut延迟在页面加载后第一次不起作用
- Bootstrap弹出,粘贴不起作用.JS加载问题
- 延迟加载效果似乎在我的页面上不起作用
- 自定义延迟加载函数将数据加载到容器中后,jQuery函数OnClick不起作用