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部分
js部分
1、先引入jquery库
2、ajax部分
$(function(){
$.ajax({
type:"get",
url:"data/data.json",
dataType:"json",
async:false,
success:function(data){
var ulData='';
for(var i=0;i'+ tagData+'';
// console.log(tagData)
}
var liContent='- '+
''+
'
![]()
'+
''+
''+
''+data_list.title+'
'+
''+
''+
''+
''+data_list.shop+''+
'
'+
''+
''+
''+data_list.state+''+
'
'+
''+
''+
''+data_list.dataTimes+''+
'
'+
''+tagCon+'
'+
''+
''+
''+data_list.money+'万'+
'
'+
''+
data_list.unitprice+'元/m²'+
'
'+
''+
''+
''+
' ';
$('.list-box').append(liContent)
}
},error:function(){
}
})
})
'+
'3、引入懒加载
$(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)}$("![]()
").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
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的顺序不要错了！
例子效果如图
