js图片延迟技术一般的思路与示例

图片延迟技术一般的思路

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/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"));
}
});

赞 (0)

相关推荐

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

  • jquery延迟加载外部js实现代码

    复制代码 代码如下: var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); $.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ try { var pageTracker = _gat._getTracker("U

  • js的延迟执行问题分析

    看这段代码: <body> <script src="deffer.js"></script> content </body> deffer.js的内容为: alert(1) 这样在alert窗口没有被关闭之前,页面都会是一片空白.因为alert窗口阻止了页面的继续渲染. 为了避免此类问题,html规范里定义了deffer和async属性,这两个属性的具体定义这里不讨论,反正他们都是用来告诉浏览器,一定要在页面渲染完成以后再执行本脚本的内

  • 浅析js预加载/延迟加载

    Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这

  • js实现点击链接后延迟3秒再跳转的方法

    本文实例讲述了js实现点击链接后延迟3秒再跳转的方法.分享给大家供大家参考.具体分析如下: js实现点击链接后延迟3秒再跳转.不管有没有用,咱们反正能实现 使用setTimeout()函数实现跳转延迟 <html> <head> <title> jquery 延迟跳转</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"

  • JS 跳转页面延迟2种方法

    方法1: 复制代码 代码如下: <SPAN style="FONT-SIZE: 12px"><script type="text/javascript"> <!-- function go(t,url){ //t设置跳转时间:秒 //url设置跳转网址 document.write("<div id=text>本页将在<strong id='tt'></strong>后,跳转至:<sp

  • JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中queue和dequeue的用法 http://www.jb51.net/article/25481.htm Window.setTimeout http://www.jb51.net/article/20741.htm以下是我用到的一些例子. 复制代码 代码如下: //延迟查询,传一个查询btn的ID,

  • js图片延迟技术一般的思路与示例

    图片延迟技术一般的思路 1.现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中(以便进行src替换). 2.获取卷轴的高度和窗口的高度 3循环需要延迟加载的img数组,获取img的高度,判断该元素是否在可视窗口内.若该元素在可视窗口内,则进行src替换 一下为测试代码 html 复制代码 代码如下: <style> .wrap { margin: 20px auto; width: 150px; } .wrap div { border: 1px

  • JS图片自动轮换效果实现思路附截图

    JS图片自动轮换效果实现思路附截图

    今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片  下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • JS图片预加载插件详解

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说

  • Java使用Tessdata做OCR图片文字识别的详细思路

    Java使用Tessdata做OCR图片文字识别的详细思路

    说到文字识别,目前除了用一些现成的api,大概就是 tessdata.canvas或者 ocrad等. 1.百度接口用过(可以自己去百度开发者申请,免费的),识别率吧,还可以,但也不是百分百的,但是次数使用有限制,虽然也是够用,但是被限制总是害怕超过不让用. 2.canvas的话是需要对图片做具体的处理,涉及到图片的翻转.置灰.文字间隔的设定等等,成功率很高,但是公司产品验证码是各式各样的,没办法用这种方法处理,所以暂时放弃了. 3.ocrad这个目前用过其.js版本,识别率还是比较低的,具体使

  • 前端JS图片懒加载原理方案详解

    目录 背景 原理 方案 方案一:img的loading属性设为“lazy” 使用方法 优点 兼容性 缺点 方案二:通过offsetTop来计算是否在可视区域内 优化 优点 缺点 方案三:通过getBoundingClientRect来计算是否在可视区域内 方案四:使用IntersectionObserver来判断是否在可视区域内 兼容性 优点 缺点 问题 布局抖动 响应式图片 SEO不友好 插件 背景 懒加载经常出现在前端面试中,是前端性能优化的常用技巧.懒加载也叫延迟加载,把非关键资源先不加载

  • 使用Node.js实现ORM的一种思路详解(图文)

    使用Node.js实现ORM的一种思路详解(图文)

    ORM是O和R的映射.O代表面向对象,R代表关系型数据库.二者有相似之处同时也各有特色.就是因为这种即是又非的情况,才需要做映射的. 理想情况是,根据关系型数据库(含业务需求)的特点来设计数据库.同时根据面向对象(含业务需求)的特点来设计模型(实体类).然后再去考虑如何做映射.但是理想很骨jian感dan,现实太丰fu满za. 没见哪个ORM是这么做的,也没见哪位高手会这么做设计.那么实际情况是什么样子的呢?以.net的Entity Framework为例. DB frist,就是先设计好数据库

  • JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆, **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置, **因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝&

  • js图片放大镜实例讲解(必看篇)

    1.图片放大镜的思路: 当打开页面时只有图片 首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片 最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

  • 可自定义速度的js图片无缝滚动示例分享

    思路: 一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了.你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

随机推荐