js图片延迟加载
什么是图片延迟加载?
也叫懒加载。
当页面有多屏的时候,页面中的图片比较多。
那么,在页面载入完毕的时候,并不会把所有的图片都加载进来。
而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载对应位置的图片。
有什么用?
主要是为了提升网站的性能,节省流量(网站和用户)。
如何实现
如果的开发的时候,实现的方式其实有很多相应的插件。
原生的js来实现。
我们就是站在学习的角度,使用原生的js来实现这个效果。
实现步骤:
搭建HTML结构
编写css样式
显示如下:
首先,就需要将src属性去掉,
其次,当滚动条滚动的过程中,如果img元素 要出现在视窗中的时候,就需要去加载对应的图片。
分析过程:
clientWidth:元素可视部分的宽度,即width和padding之和,不包含边框和滚动条,也不包含任何可能的滚动区域。
clientHeight:元素可视部分的高度,及heigth和padding之和,不包括边框和滚动条,也不包含任何可能的滚动区域。
编写代码如下:
先看一张图片的效果:
使用循环,批量处理
js图片延迟加载的更多相关文章
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- js图片延迟加载如何实现
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示. 大概的实现方式是: 在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的sr ...
- JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
随机推荐
- php foreach引用赋值
在写代码时发现php foreach引用赋值会导致意外的行为. 代码示例: <?php $arr = array('a','b','c'); foreach($arr as $k=>&am ...
- sublime 相关配置
安转插件:案例格式化HTML代码,需要安装插件,具体安装步骤如下: 1.打开菜单->首选项->插件控制,输入 install package 2.等待程序进入插件管理功能,再输入插件名称: ...
- yii2权限控制rbac之rule详细讲解
作者:白狼 出处:http://www.manks.top/yii2_rbac_rule.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留 ...
- solr定时更新索引遇到的问题(SolrDataImportProperties Error loading DataImportScheduler properties java.lang.NullPointerException)
问题描述 报如下错误,很显然,问题原因:空指针异常: ERROR (localhost-startStop-1) [ ] o.a.s.h.d.s.SolrDataImportProperties ...
- java环境变量配置
1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0 ...
- 收集几个不错的最新win10系统64位和32位系统Ghost版下载
系统来自转载:系统妈 ◆ 版本特点 该版本安装后可利用微软公开的Windows10 KMS密钥激活,且右小角无版本水印. KMS客户端密钥:NPPR9-FWDCX-D2C8J-H872K-2YT43, ...
- Block入门
iOS4.0开始,Block横空出世,它其实就是c预言的补充,书面点说就是带有自动变量的匿名函数,Block简洁,代码的可读性也高,因此深受广大开发者的喜爱,这一次给大家介绍Block的基本类型和项目 ...
- java程序设计之循环链表
照例来说点废话,愿自己生一颗温柔细腻的心,这样女朋友也许一个眼神,一个微笑,我就知道如何做,可惜内心与外表一样粗糙,这一生有幸认识她,愿天下有情人终成眷属. 循环链表,顾名思义循环就好了,所以建一个线 ...
- 升级xcode8之后出现报错提示,提示swift版本问题
最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...
- [LeetCode] Distinct Subsequences 不同的子序列
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...