General idea and example of js image delay technology
- 2020-03-30 02:25:03
- OfStack
General idea of picture delay technique
1. Now set the SRC path corresponding to the img element as the background image, and the url path corresponding to the img is stored in a self-set attribute (for SRC replacement).
2. Gets the height of the scroll and the height of the window
Loop through the img array that needs to be lazily loaded, get the height of the img, and determine whether the element is in the visual window. If the element is in the visual window, SRC is substituted
The following is the test code
HTML
Js part
1. Now set the SRC path corresponding to the img element as the background image, and the url path corresponding to the img is stored in a self-set attribute (for SRC replacement).
2. Gets the height of the scroll and the height of the window
Loop through the img array that needs to be lazily loaded, get the height of the img, and determine whether the element is in the visual window. If the element is in the visual window, SRC is substituted
The following is the test code
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 part
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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.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"));
}
});