<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lazy_load 0.2 图片延迟加载</title>
<style>
.lazyimg{
width:150px;
height:150px;
background:url('imgs/loading.gif') 50% 50% no-repeat transparent;
border: solid 1px #efeffe;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//load_img();
//为了显示loading样式,延迟2秒加载图片,实际开发中直接调用就行.
setTimeout(function(){load_img();},2000);
function load_img(){
var imgs = document.getElementsByTagName('img');
var imgs_length = imgs.length;
for(var i=0;i<imgs_length;i++){
var old_img = imgs[i];
if(!old_img.getAttribute('lazysrc'))
continue;
var img = document.createElement('img');
img.onload = (function(old_img,img){
return function(){
old_img.src = img.src;
}
})(old_img,img);
img.src = old_img.getAttribute('lazysrc');
}
}
}
</script>
<img src="imgs/blank.gif" lazysrc="imgs/1.jpg" class="lazyimg" />
<img src="imgs/blank.gif" lazysrc="imgs/2.jpg" class="lazyimg" />
<img src="imgs/blank.gif" lazysrc="imgs/3.jpg" class="lazyimg" />
<img src="imgs/blank.gif" />
<img src="imgs/blank.gif" lazysrc="" />
</body>
</html>
分享到：
相关推荐
图片延迟加载，可以增加用户体验，jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。
JQuery 图片延迟加载 lazyload
图片延迟加载实例。在chrome network中查看效果。简单易用 无冗余代码
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
jQuery图片延迟加载插件Lazy Load，在网页上出现大量图片的时候，一下加载全部图片需要加载比较长的时间，懒加载的目的就是减少加载时间，按需加载从而达到提升用户体验的目的。
实现网页内容、图片延迟加载，没有浏览到的不显示，只有浏览器看到的才显示。
在layui的源代码里面添加了懒加载功能代码，这是自动化构建之后的代码
Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。...由于内容比较多，下一篇再介绍图片延迟加载效果。 兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
LazyLoad 图片延迟加载效果示例 LazyLoad 图片延迟加载效果示例，这是由cloudgamer编写的一个封装插件，用它可以完成不少的效果，现在这个是图片延迟效果，也就是说，我们需要显示的图片会先加载，暂时用不上的也就...
js lazyload实现网页图片延迟加载特效
延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js
延迟加载滚动视图ScrollView的包装器，将启用延迟加载用法将lazy_load_scrollview依赖项添加到您的pubspec.yaml ： dependencies : lazy_load_scrollview : 1.3.0 在DART代码，进口package:lazy_load_scrollview/...
该资源包含lazyload.js、jquery2.1、还有个小Demo可供参考
Lazyload图片延迟加载效果
lazyload.js实现图片异步延迟加载
页面延迟加载JS包 lazyload.js scrollloading.js
Lazyload图片延迟加载效果，很值得去学习的案例！
lazy_object_proxy-1.4.3-cp27-cp27m-win_amd64