javascript图片预加载
图片预加载是非常常见的一个功能,PC和移动端都会用到,尤其是在移动端,只要涉及到较多图片的加载都会用到该技术。下面是移动端用到的,引入了zepto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style type="text/css">
*{margin:0;padding:0;}
.img-wrap{width:100%;overflow: hidden;background-repeat: no-repeat;background-size: cover;}
.img-wrap img{width:100%;}
</style>
</head>
<body>
<div class="lazyload-wrap">
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
<div class="img-wrap">
<img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>
</div>
</div>
<script type="text/javascript" src="script/zepto.min.js"></script>
<script type="text/javascript" src="script/lazyload.js"></script>
</body>
</html>
lazyload.js:
var lazyload = function(container) {
var lazyClsName = "util-lazyload";//图片样式名
var $container = container;
var threshold = 1;
//获取容器下面需要懒加载的元素
function getLazyElements(container) {
return $container.find("." + lazyClsName);
}
//浏览器滚动轴滚动
var handleScroll = function() {
var elements = getLazyElements(container);
elements.each(function() {
if (!belowTheFold($(this))) {
$(this).trigger("appear");
}
});
for (var i = 0, length = elements.length; i < length; i++) {
if (elements[i].loaded === true) {
$(elements[i]).removeClass(lazyClsName);
}
}
};
if ($container.data("lazyload") !== true) {
$(window).on('scroll', handleScroll);
$container.on("appear", "." + lazyClsName, function(e) {
var target = e.target;
if (target.loaded !== true) {
preload($(target));
target.loaded = true;
}
});
$(container).data('lazyload', true);
}
//图片预加载
function preload(element) {
var img = document.createElement('img'),
src = element.attr('data-origin');
$(img).bind("load", function() {
element.parent().css('backgroundImage', 'url(' + src + ')');
element.css('visibility', 'hidden');
})
.bind('error', function() {
$self.css('visibility', 'visible');
})
.attr("src", src);
}
//判断是否在可视区域
function belowTheFold(element, threshold) {
var fold = window.innerHeight + window.scrollY;
return fold <= $(element).offset().top;
} /* Force initial check if images should appear. */
setTimeout(handleScroll, 0);
return $(container);
};
lazyload($(".lazyload-wrap"));
javascript图片预加载的更多相关文章
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 再谈javascript图片预加载技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- javascript 图片预加载
<!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript兑现图片预加载【回调函数,多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- TestGc finalize()
package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...
- php尝试调用一个图灵机器人
1.需要到图灵机器人的网址,去注册一下账号.网址:http://www.tuling123.com/sso-web/index.html?ReturnURL=http%3A%2F%2Fwww.tuli ...
- 使用python requests库写接口自动化测试--记录学习过程中遇到的坑(1)
一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...
- Flexbox(弹性盒子)
CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...
- MqttNet 通讯
MQTT,IBM发明的物联网通讯协议基于tcp ip , 收集传感器上的数据. 下图理解: broker 这里有很多消息,根据主题不同来进行区分,它这里可以保管所有连过来的客户端的数据,然后客户端, ...
- 数据库SQL(1)
EG1:db.LpOutputGroups.GroupBy(q => q.CalcGroupDesc).ToList().OrderByDescending(m => m.First(). ...
- Unity QualitySettings.vSyncCount 垂直同步数
QualitySettings.vSyncCount 垂直同步数 Description 描述 The VSync Count. 垂直同步数. The number of VSyncs that sh ...
- kafka集群安装及简单使用
关于kafka是什么及原理,请参考kafka官方文档的介绍:http://kafka.apache.org/documentation/#introduction ,英文不好的同学可以看这里http: ...
- JavaScript HTML DOM学习记录
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...
- django notes 二:URL dispatcher
一般在 settings.py 中会有一个 ROOT_URLCONF ,请求到来时 django 会从 ROOT_URLCONF 指向的文件中查找 urlpatterns 变量配置的路由. url ...