ajax图文列表加载数据加入懒加载与onerror

css部分

*{margin:0;padding:0;border:0;}
ul{list-style:none;}
.bOx{width:1200px;margin:20px auto;}
.list li{line-height:35px}
h3{color:#007BC4;font-size:16px;}body{background:#fff;color:#333;}
body,ul,ol,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,td,th{margin:0;padding:0;}
body,textarea,input,select{font-size:14px;font-family:"Microsoft YaHei",Tahoma,Arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
li{list-style:none;}
img{border:none;display:block;}
em,i{font-style:normal;}
textarea{resize:none;overflow:auto;}
textarea,input,select{outline:none;}
tabel{border-collapse:collapse;}
a{text-decoration:none;color:#333;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
a:focus{outline:none;}
a,area{blr:expression(this.onFocus=this.blur());}
input[type=submit],input[type=reset],input[type=button]{filter:chroma(color=#000000);}/*clear*/
.clear:after{content:".";height:0;display:block;clear:both;visibility:hidden;}
.clear{_zoom:1;*display:inline-block;}
/*ellipsis*/
.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
/*border-radius*/
.border-radius{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
/*list*/
.list-wrap{width:700px;margin:20px auto;}
.list-box li{overflow:hidden;position:relative;margin-bottom:20px;}
.list-pic{float:left;width:240px;height:196px;border-radius:4px;background:#ccc;}
.list-pic img{width:240px;height:196px;}
.list-con{float:left;width:300px;margin-left:20px;}
.list-con h2{margin-bottom:16px;overflow:hidden;}
.list-con h2 a{float:left;max-width:500px;font-size:20px;line-height:30px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-con h2 a:hover{color:#1c8fff;}.list-info p{color:#666;padding:7px 0;vertical-align:middle;}
.list-info .icon{display:inline-block;vertical-align:2px;margin-right:5px;width:8px;height:8px;    border-radius:3px;}
.info-con span{padding-right:10px;}
.list-info .tag{font-size:12px;padding-left:26px;}
.tag span{display:inline-block;padding:4px 10px;/*background:#DFEFFF;color:#1c8fff;*/border-radius:4px;margin-right:10px;}.price-box{position:absolute;right:0;top:54px;color:#666;text-align:right;}
.price-box .wan{color:#FF6666;}
.price-box .wan span{font-size:30px;font-weight:bold;}
.price-box .dan{padding-top:10px;}.icon-huxing{background:#c1c5f9;}
.icon-time{background:#f1cfb0;}
.icon-address{background:#f2c1f3;}
.tag span{color:#000;}
.tag .tag_0{background:#c3dbf3;}
.tag .tag_1{background:#fbd08f}
.tag .tag_2{background:#fdd2d5;}
.tag .tag_3{background:#add2a5;}

html部分

<div class="list-wrap"><ul class="list-box"><!--<li><a class="list-pic"><img class="lazy" data-src="data:images/1.jpg" data-onerror="houseimgerror(this)" /></a><div class="list-con"><h2><a>标题</a></h2><div class="list-info"><p class="info-con"><i class="icon icon-huxing"></i><span>文字</span></p><p class="info-con"><i class="icon icon-time"></i><span>11</span><span>地址</span></p><p class="info-con"><i class="icon icon-address"></i>时间发布</p><p class="tag"><span>标签</span></p><div class="price-box"><p class="wan"><span>6</span>万</p><p class="dan">8元/m²</p></div></div></div></li>--></ul>
</div>

js部分

1、先引入jquery库 <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>

2、ajax部分

$(function(){$.ajax({type:"get",url:"data/data.json",dataType:"json",async:false,success:function(data){var ulData='<ul class="list-box">';for(var i=0;i<data.imgListData.length;i++){var data_list=data.imgListData[i]
//          console.log(data_list)//tag标签var tagCon='';for(var j=0;j<data_list.tag.length;j++){var tagData=data_list.tag[j].tags;tagCon += '<span class="tag_'+j+'">'+ tagData+'</span>';
//              console.log(tagData)}var liContent='<li>'+'<a class="list-pic">'+'<img class="lazy" data-src="'+data_list.imgUrl+'" data-onerror="houseimgerror(this)" />'+'</a>'+'<div class="list-con">'+'<h2><a>'+data_list.title+'</a></h2>'+'<div class="list-info">'+'<p class="info-con">'+'<i class="icon icon-huxing"></i>'+'<span>'+data_list.shop+'</span>'+'</p>'+'<p class="info-con">'+'<i class="icon icon-time"></i>'+'<span>'+data_list.state+'</span>'+'</p>'+'<p class="info-con">'+'<i class="icon icon-address"></i>'+'<span>'+data_list.dataTimes+'</span>'+'</p>'+'<p class="tag">'+tagCon+'</p>'+'<div class="price-box">'+'<p class="wan">'+'<span>'+data_list.money+'</span>万'+'</p>'+'<p class="dan">'+data_list.unitprice+'元/m²'+'</p>'+'</div>'+'</div>'+'</div>'+'</li>';$('.list-box').append(liContent)   }   },error:function(){}})})

3、引入懒加载 <script src="js/lazy.js"></script>

$(function(){//延迟显示图片$("img.lazy").lazyload({skip_invisible : false,effect: "fadeIn"});});//(function($,window,document,undefined){var $window=$(window);$.fn.lazyload=function(options){var elements=this;var $container;var settings={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:window,data_attribute:"src",skip_invisible:true,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ZTQyYWViOS0xNmNjLTQ3NDItOGM2Ny03OTBjMGFmMDE3MDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjRGOTY0NjdDOEVCMTFFN0EzMzhCODlGNDhEQjMyRTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjRGOTY0NjZDOEVCMTFFN0EzMzhCODlGNDhEQjMyRTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpkODY3OWQzOS04NzdkLTRiMmQtOTAxYS1lN2RiY2Y2MmUzY2UiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo4NGRkZWNhZS03MTAyLTExZTctOTkyMi04ZDhjNTM5MGUyYzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz47mmibAAAAEElEQVR42mL4//8/A0CAAQAI/AL+26JNFgAAAABJRU5ErkJggg=="};function update(){var counter=0;elements.each(function(){var $this=$(this);if(settings.skip_invisible&&!$this.is(":visible")){return}if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else{if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$this.trigger("appear");counter=0}else{if(++counter>settings.failure_limit){return false}}}})}if(options){if(undefined!==options.failurelimit){options.failure_limit=options.failurelimit;delete options.failurelimit}if(undefined!==options.effectspeed){options.effect_speed=options.effectspeed;delete options.effectspeed}$.extend(settings,options)}$container=(settings.container===undefined||settings.container===window)?$window:$(settings.container);if(0===settings.event.indexOf("scroll")){$container.bind(settings.event,function(){return update()})}this.each(function(){var self=this;var $self=$(self);self.loaded=false;if($self.attr("src")===undefined||$self.attr("src")===false){if($self.is("img")){$self.attr("src",settings.placeholder)}}$self.one("appear",function(){if(!this.loaded){if(settings.appear){var elements_left=elements.length;settings.appear.call(self,elements_left,settings)}$("<img />").bind("load",function(){var original=$self.attr("data-"+settings.data_attribute);$self.hide();if($self.is("img")){$self.attr("src",original);$self.attr("onerror", $self.attr("data-onerror"));}else{$self.css("background-image","url('"+original+"')")}$self[settings.effect](settings.effect_speed);self.loaded=true;var temp=$.grep(elements,function(element){return !element.loaded});elements=$(temp);if(settings.load){var elements_left=elements.length;settings.load.call(self,elements_left,settings)}}).attr("src",$self.attr("data-"+settings.data_attribute)).attr("onerror", $self.attr("data-onerror"))}});if(0!==settings.event.indexOf("scroll")){$self.bind(settings.event,function(){if(!self.loaded){$self.trigger("appear")}})}});$window.bind("resize",function(){update()});if((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)){$window.bind("pageshow",function(event){if(event.originalEvent&&event.originalEvent.persisted){elements.each(function(){$(this).trigger("appear")})}})}$(document).ready(function(){update()});return this};$.belowthefold=function(element,settings){var fold;if(settings.container===undefined||settings.container===window){fold=(window.innerHeight?window.innerHeight:$window.height())+$window.scrollTop()}else{fold=$(settings.container).offset().top+$(settings.container).height()}return fold<=$(element).offset().top-settings.threshold};$.rightoffold=function(element,settings){var fold;if(settings.container===undefined||settings.container===window){fold=$window.width()+$window.scrollLeft()}else{fold=$(settings.container).offset().left+$(settings.container).width()}return fold<=$(element).offset().left-settings.threshold};$.abovethetop=function(element,settings){var fold;if(settings.container===undefined||settings.container===window){fold=$window.scrollTop()}else{fold=$(settings.container).offset().top}return fold>=$(element).offset().top+settings.threshold+$(element).height()};$.leftofbegin=function(element,settings){var fold;if(settings.container===undefined||settings.container===window){fold=$window.scrollLeft()}else{fold=$(settings.container).offset().left}return fold>=$(element).offset().left+settings.threshold+$(element).width()};$.inviewport=function(element,settings){return !$.rightoffold(element,settings)&&!$.leftofbegin(element,settings)&&!$.belowthefold(element,settings)&&!$.abovethetop(element,settings)};$.extend($.expr[":"],{"below-the-fold":function(a){return $.belowthefold(a,{threshold:0})},"above-the-top":function(a){return !$.belowthefold(a,{threshold:0})},"right-of-screen":function(a){return $.rightoffold(a,{threshold:0})},"left-of-screen":function(a){return !$.rightoffold(a,{threshold:0})},"in-viewport":function(a){return $.inviewport(a,{threshold:0})},"above-the-fold":function(a){return !$.belowthefold(a,{threshold:0})},"right-of-fold":function(a){return $.rightoffold(a,{threshold:0})},"left-of-fold":function(a){return !$.rightoffold(a,{threshold:0})}})})(jQuery,window,document);

4、引入error，图片错误是显示404 <script src="js/image-error.js"></script>

function houseimgerror(obj) {//404图片obj.onerror = "";obj.src = "common/images/houseList404.jpg";obj.onerror=null;
}

例子里json数据结构这里推荐个网址可以模仿接口数据 https://easy-mock.com/

{"imgListData": [{"id": "1","title": "描述","content": "描述","city": "上海","adrs": "描述","room": "描述","imgUrl": "图片地址","dataTimes": "2018-03-15","peo": "姓名","tel": "手机号","pho": "图片地址","money": "描述","unitprice": "描述","state": "描述","gender": "描述","wechatImg": "图片地址","region": "描述","shop": "描述","tag": [{"tags": "标签一"},{"tags": "标签七"},{"tags": "标签八"}]}]
}

最后注意js的顺序不要错了！

例子效果如图

ajax图文列表加载数据加入懒加载与onerror相关推荐

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
android预加载布局,Android 懒加载优化
目录介绍 1.什么是懒加载 1.1 什么是预加载 1.2 懒加载介绍 1.3 懒加载概括 2.实际应用中有哪些懒加载案例 2.1 ViewPager+Fragment组合 2.2 分析源码 3.Vie ...
图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
el-select下拉加载（实现懒加载）自定义loadmore事件
el-select下拉加载(实现懒加载)自定义loadmore事件使用场景:下拉框远程搜索数据量较大,导致dom渲染很慢,所以远程搜索要采用分页的形式,故自定义事件,实现滚动加载,具体如下: 1.自 ...
echarts加载数据时自定义加载动画
echarts加载数据时自定义加载动画 1.实现 1.实现有时用echarts加载数据时,尤其是首次加载,可能一时加载不出数据,可以给它加一个加载动画 let departChart = this. ...
php ajax 懒加载demo,lazyload懒加载，怎么支持ajax获得的新内容？
lazyload懒加载,怎么支持ajax获得的新内容? 现在问题是: 1.老的内容已经$("img.lazy").lazyload({effect: "fadeIn&qu ...
element中树形数据与懒加载实现全部展开和全部收起
element中属性懒加载数据 default-expand-all属性::是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起类似如 ...
ios 平滑移动view_iOS 关于列表上拉（平滑加载数据）自动加载数据的问题
项目需求我的的列表需要改变,原来的分页加载采用的是MJRefresh框架进行加载更多数据,这需要有一个上拉动作才能触发,而我的产品的意思是当快要滑动到底部时自动加载下一页数据.我自己看了一下,发现很 ...
列表懒加载和图片懒加载
参考链接整理: element-ui自带的图片懒加载指令和列表懒加载指令 element-ui 图片懒加载 element-ui 列表懒加载原理和原生js:图片懒加载如何用原生js实现图片懒加载( ...

ajax图文列表加载数据加入懒加载与onerror

css部分

html部分

js部分

ajax图文列表加载数据加入懒加载与onerror相关推荐

最新文章

热门文章