图片预加载是非常常见的一个功能,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图片预加载的更多相关文章

  1. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 再谈javascript图片预加载技术

    图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...

  4. javascript 图片预加载

    <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. TestGc finalize()

    package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...

  2. php尝试调用一个图灵机器人

    1.需要到图灵机器人的网址,去注册一下账号.网址:http://www.tuling123.com/sso-web/index.html?ReturnURL=http%3A%2F%2Fwww.tuli ...

  3. 使用python requests库写接口自动化测试--记录学习过程中遇到的坑(1)

    一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...

  4. Flexbox(弹性盒子)

    CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...

  5. MqttNet 通讯

    MQTT,IBM发明的物联网通讯协议基于tcp ip , 收集传感器上的数据. 下图理解:  broker 这里有很多消息,根据主题不同来进行区分,它这里可以保管所有连过来的客户端的数据,然后客户端, ...

  6. 数据库SQL(1)

    EG1:db.LpOutputGroups.GroupBy(q => q.CalcGroupDesc).ToList().OrderByDescending(m => m.First(). ...

  7. Unity QualitySettings.vSyncCount 垂直同步数

    QualitySettings.vSyncCount 垂直同步数 Description 描述 The VSync Count. 垂直同步数. The number of VSyncs that sh ...

  8. kafka集群安装及简单使用

    关于kafka是什么及原理,请参考kafka官方文档的介绍:http://kafka.apache.org/documentation/#introduction ,英文不好的同学可以看这里http: ...

  9. JavaScript HTML DOM学习记录

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  10. django notes 二:URL dispatcher

    一般在 settings.py 中会有一个  ROOT_URLCONF ,请求到来时 django 会从 ROOT_URLCONF 指向的文件中查找  urlpatterns 变量配置的路由. url ...