展会信息港展会大全

js图片延迟技术一般的思路与示例
来源:互联网   发布日期:2016-01-26 11:03:28   浏览:1182次  

导读:现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中图片延迟技术一般的思路1 现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中(以 ...

现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中

图片延迟技术一般的思路

1.现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中(以便进行src替换)。

2.获取卷轴的高度和窗口的高度

3循环需要延迟加载的img数组,获取img的高度,判断该元素是否在可视窗口内。若该元素在可视窗口内,则进行src替换

一下为测试代码

html

代码如下:

<style>

.wrap {

margin: 20px auto;

width: 150px;

}

.wrap div {

border: 1px dotted #E29808;

height: 30px;

line-height: 30px;

margin: 5px auto;

text-align: center;

width: 150px;

}

.wrap .sortable {

background-color: #E6D6AB;

border: 1px solid #E29808;

}

#showImg li{

width:30%;

margin-left:2%;

margin-top:15px;

height:300px;

float:left;

background:#CCC;

}

#showImg li:nth-child(3n){

margin-left:3%;

}

#showImg li img{

width:100%;

max-height:100%;

}

</style>

</head>

<body>

<div id="showImg">

<li><img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt="test" /></li>

<li><img src="http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg" alt="test" /></li>

<li><img src="http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg" alt="test" /></li>

</div>

</body>

js部分

代码如下:

var imgsglobal=[

"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg",

"http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg",

"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg",

"http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg",

"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVY

anRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",

"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9Ya

VhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",

"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg",

"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg",

"http://img4.duitang.com/uploads/item/201112/04/20111204170801_fiBKm.jpg",

"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg",

"http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg",

"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg",

"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg",

"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg",

"http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg",

"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8.thumb.600_0.jpg"

];

function addImgEle(){

var str='';

for(var i=0, len=imgsglobal.length; i<len; i++){

str+='<li><img class="lazyImg" src="wait" resrc="'+imgsglobal[i]+'" /></li>'

}

$("#showImg").append(str);

}

$(document).ready(function(){

addImgEle();

});

(function(win){

var lazyLoad=win['lazyLoad']||{};

var camelize = function (s) {

return s.replace(/-(w)/g, function (strMatch, p1) {

return p1.toUpperCase();

});

};

lazyLoad={

init:function(ImgClass){

var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,

offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);

var Imgeles=ImgClass;

for(var i=0, len=Imgeles.length; i<len; i++){

if(Imgeles[i].getAttribute("resrc")=="show"){

continue;

}

var o=Imgeles[i];

if(o){

postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop +window.document.body.scrollTop;

postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));

if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)){

var src=o.getAttribute("resrc");

o.setAttribute("src", src);

o.setAttribute("resrc", "show");

}

}

}

},

getStyle:function (element, property) {

if (arguments.length != 2) return false;

var value = element.style[camelize(property)];

if (!value) {

if (document.defaultView && document.defaultView.getComputedStyle) {

var css = document.defaultView.getComputedStyle(element, null);

value = css ? css.getPropertyValue(property) : null;

} else if (element.currentStyle) {

value = element.currentStyle[camelize(property)];

}

}

return value == 'auto' ? '' : value;

}

}

win.lazyLoad=lazyLoad;

})(window);

$(document).ready(function(){

lazyLoad.init($("img.lazyImg"));

window.onscroll=function (){

lazyLoad.init($("img.lazyImg"));

}

});

赞助本站

人工智能实验室

相关热词: 图片延迟技术 js

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港