JS 图像延迟加载

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 width: 100px;
 9                 height: 100px;
10                 background: url(img/1.jpg);
11             }
12         </style>
13     </head>
14     <body>
15         <div id="box">
16
17         </div>
18     </body>
19
20     <script type="text/javascript">
21 //        http://pic70.nipic.com/file/20150618/21278791_104700147417_2.jpg
22
23     var box = document.getElementById("box");
24     // 创建一个 image 对象
25     var img = new Image;
26     img.width = 100;
27     img.height = 100;
28     // img对象只要设置 src 属性就开始加载图片,为了避免图片加载太快的问题,图片的src 属性在最后设置
29     img.onload= function(){
30         // 加载完毕之后,替换图片
31         box.appendChild(img);
32         img.height = 0;
33         var timer = setInterval(function(){
34             img.height+= 10;
35             if(img.height == 100){
36                 box.style.background = "none";
37                 clearInterval(timer);
38             }
39         },30);
40     }
41
42     img.src = "http://www.infinistudio.cn/uploads/allimg/160318/1-16031Q922210-L.jpg";
43
44
45
46
47     </script>
48 </html>
时间: 2024-10-29 19:10:40

JS 图像延迟加载的相关文章

简单的JavaScript图像延迟加载库Echo.js

插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用.并且 Echo.js 非常小巧,压缩后不足 1KB. 兼容性 Echo.js 使用了 HTML5 的 date 属性,并且需要获取该属性的值,所以它并不兼容 IE6.IE7.虽然 Lazy Load 也使用了 HTML5 的 date 属性,但它

js图片延迟加载

http://stylechen.com/imglazyload2.html [译]页面加载中的图片性能优化 2013年05月26日 吴 天豪 性能优化  原文地址:http://www.stevesouders.com/blog/2013/04/26/i/ 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,"JS和CSS是页面

jquery.lazyload.js图片延迟加载

一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度.浏览器将会在 加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.  二.插件作者下载地址 JS下载:http://www.ijquery.cn/js/lazyloa

jquery.lazyload.js 图片延迟加载

当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定): <script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min"></script> &l

jQuery与lazyload.js图片延迟加载

一.简介: 在html中请求图片是最大的一处难题,图片的大小给我们的服务器带来了很大的压力,造成了请求时间过长.图片难以加载出来.jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度. 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载.对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 官网:https://appelsiini.net/projects/lazyload/ 帮助:http://code.ciao

js图片延迟加载如何实现

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示. 大概的实现方式是: 在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片. 然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来. 这里比较麻烦地方是,如何计算img的

关于JS实现延迟加载

不多说 直接上代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; - webkit - box - sizing: border - box; - moz - box - sizin

lazysizes-好用的延迟加载JS插件

此插件可直接引入lazysizes即可 <script src="lazysizes.min.js"></script> 延迟加载(lazy load)是(也称为懒加载)Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作. 浏览器加载过程中,由于图片过多导致加载速度过慢,那么我们只需要在"看得见"的地方加载图片,而"看不见

延时加载js代码提高速度

延时加载js代码提高速度:如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题.一.延时加载js文件:可以使用定时器函数setTimeout()让外部的js文件延迟加载,例如: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"