图片异步加载
2016-03-21 11:53
232 查看
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#div1{
width: 320px;
height: 500px;
background: #ffbc6c;
}
#div1 img{
width: 320px;
}*/
</style>
<link type="text/css" rel="stylesheet" href="bb.css"/>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
/*var oDiv=document.querySelector("#div1");
window.setTimeout(function(){
var oImg=new Image();
oImg.src="0.jpg";
oImg.onload=function(){
oDiv.innerHTML="<img src='"+this.src+"'/>";
}
},0);*/
//静态资源图片：在布局的时候就能定下来的图片
//对于小图片、小图标用css sprite优化
//对于大图，可以切成一个个的小图，然后用css sprite依次分别的加载
//图片base64技术(应用于以上方法试了效果都不太好使)
//减少了网络请求，然后避免了服务器和浏览器之间解码编码的过程,在迫不得已的情况下，用这个方法一下就解决了
//缺点：代码太长
//http://tool.css-js.com/
//动态数据图片：通过ajax后台返回的图片
//图片延迟加载
//1、先给当前要显示图片的区域一张比较小的默认的背景图或者背景颜色，占一个位置
//2、var oImg=new Image()创建一张临时的图片，加载我们真实的图片地址，在oImg.onload中 动态创建img标签，把真实地址赋值，然后把这个元素添加到之前规定的区域
</script>
</body>
</html>
方法二：
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
}
#div1{
width: 100%;
height: 400px;
background-color: red;
}
img{
width: 50px;
height: 60px;
display: block;
}
</style>
</head>
<body>
<h1>图片延迟加载理论基础</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_gong.jpg" alt="">
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_tian.jpg" alt="">
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_zheng2.jpg" alt="">
<br>
<script>
var oImgs=document.getElementsByTagName('img');
for(var i=0;i<oImgs.length;i++){
var oImg=oImgs.item(i);
oImg.myBottom=offset(oImg).top+oImg.offsetHeight;
}
window.onscroll=function(){
var winBottom=(document.documentElement.scrollTop||document.body.scrollTop)+(document.documentElement.clientHeight||document.body.clientHeight);
for(var i=0;i<oImgs.length;i++){
var oImg=oImgs.item(i);
if(oImg.myBottom<winBottom){
// alert()
oImg.src=oImg.getAttribute("imgss")
}
}
}
function offset(ele){
var t=ele.offsetTop;
var l=ele.offsetLeft;
var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
t+=p.offsetTop;
l+=p.offsetLeft;
}else{
t+=p.offsetTop+p.clientTop;
l+=p.offsetLeft+p.clientLfet;
}
p=p.offsetParent;
}
return {left:l,top:t};
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#div1{
width: 320px;
height: 500px;
background: #ffbc6c;
}
#div1 img{
width: 320px;
}*/
</style>
<link type="text/css" rel="stylesheet" href="bb.css"/>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
/*var oDiv=document.querySelector("#div1");
window.setTimeout(function(){
var oImg=new Image();
oImg.src="0.jpg";
oImg.onload=function(){
oDiv.innerHTML="<img src='"+this.src+"'/>";
}
},0);*/
//静态资源图片：在布局的时候就能定下来的图片
//对于小图片、小图标用css sprite优化
//对于大图，可以切成一个个的小图，然后用css sprite依次分别的加载
//图片base64技术(应用于以上方法试了效果都不太好使)
//减少了网络请求，然后避免了服务器和浏览器之间解码编码的过程,在迫不得已的情况下，用这个方法一下就解决了
//缺点：代码太长
//http://tool.css-js.com/
//动态数据图片：通过ajax后台返回的图片
//图片延迟加载
//1、先给当前要显示图片的区域一张比较小的默认的背景图或者背景颜色，占一个位置
//2、var oImg=new Image()创建一张临时的图片，加载我们真实的图片地址，在oImg.onload中 动态创建img标签，把真实地址赋值，然后把这个元素添加到之前规定的区域
</script>
</body>
</html>
方法二：
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
}
#div1{
width: 100%;
height: 400px;
background-color: red;
}
img{
width: 50px;
height: 60px;
display: block;
}
</style>
</head>
<body>
<h1>图片延迟加载理论基础</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_gong.jpg" alt="">
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_tian.jpg" alt="">
<br>
<img imgss="portrait_zheng2.jpg" src="portrait_zheng2.jpg" alt="">
<br>
<script>
var oImgs=document.getElementsByTagName('img');
for(var i=0;i<oImgs.length;i++){
var oImg=oImgs.item(i);
oImg.myBottom=offset(oImg).top+oImg.offsetHeight;
}
window.onscroll=function(){
var winBottom=(document.documentElement.scrollTop||document.body.scrollTop)+(document.documentElement.clientHeight||document.body.clientHeight);
for(var i=0;i<oImgs.length;i++){
var oImg=oImgs.item(i);
if(oImg.myBottom<winBottom){
// alert()
oImg.src=oImg.getAttribute("imgss")
}
}
}
function offset(ele){
var t=ele.offsetTop;
var l=ele.offsetLeft;
var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
t+=p.offsetTop;
l+=p.offsetLeft;
}else{
t+=p.offsetTop+p.clientTop;
l+=p.offsetLeft+p.clientLfet;
}
p=p.offsetParent;
}
return {left:l,top:t};
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Linux下文件系统监控神器Inotify
- 关于nginx解析不了php的问题
- SpringMVC项目搭建
- linux学习笔记-1：计算机概论
- Jenkins进阶系列之——02email-ext邮件通知模板
- ARM指令学习,王明学learn
- 代码分析
- 【JAVA】PL/SQL连接：ORA-12154:TNS:无法解析指定的连接标识符
- 通过反射动态调用set,get方法
- UML_时序图画法
- ubuntu配置LAMP小过程
- iOS-OC-iOS传值大全(代理传值,block 传值,单例传值,通知传值,属性传值)
- C#后台无刷新页面弹出alert方法
- Jenkins进阶系列之——01使用email-ext替换Jenkins的默认邮件通知
- 如何看待互联网组织的“扁平化趋势”？
- HTML/CSS基础知识总结
- AndroidStudio权威教程 AS添加第三方库的6种方式（Jar module so等）
- PHP进阶：判断文件是否存在
- Zabbix监控整合OneAlert报警平台实现邮件、短信、微信、电话多方式报警
- JAVA中Collection接口和Map接口的主要实现类