js图片懒加载(滚动加载)判断是否生效
一、什么是懒加载?
对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。
二、为什么使用懒加载?
懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
理论性知识大家都有自己的获取渠道,不多说,下面看具体内容
引入js文件 jquery.lazyload.js
<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/lazyload/jquery.lazyload.js"></script>
HTML页面
<img class="lazy imgShow" src="{$val.sharingimg}" width="50px;">
<script>
$(document).ready(function(){
$("img.lazy").lazyload({
effect : "fadeIn",
failurelimit : 3 //failurelimit : 10 在找到10张不在可视范围内的图片时停止执行
});
});
</script>
测试
打开Google Chrome Network选项 Slow 3G
看下我的测试结果
1、打开页面 看下加载的内容
2、下拉后,对比下
以上就是全部内容,如有错误,还请指正,谢谢。
js图片懒加载(滚动加载)判断是否生效的更多相关文章
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
- 【前端优化】js图片懒加载及优化
一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
- js图片懒加载(滚动加载)是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- web性能优化之js图片懒加载
html <div class="container"> <ul> <li> <div id="first" clas ...
- js——图片懒加载
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="4 ...
- 原生js图片懒加载特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生图片懒加载 或 js原生图片预加载,html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
随机推荐
- CAD控件使用教程 自定义实体的实现
自定义实体的实现 1 . 自定义实体... 3 1.1 说明... 3 1.2 类的类型信息... 3 1.3 worldDraw.. 4 1.4 ...
- R-FCN:Object Detection via Region-based Fully Convolutional Networks
fast.faster这些网络都可以被roi-pooling层分成两个子网络:1.a shared,'fully convolutional' subnetwork 2.an roi-wise sub ...
- Django中使用多线程发送邮件
1.settings.py 增加Email设置 #mail EMAIL_HOST = ‘smtp.gmail.com’ #邮件smtp服务器 EMAIL_POR ...
- python while、continue、break
while循环实现用户登录 _user = "tom" _passwd = "abc123" counter = 0 while counter < 3: ...
- java生成6位随机数字
//生成6位随机数字 System.out.println((int)((Math.random()*9+1)*100000)); //生成5位随机数字 System.out.println((int ...
- 【(待重做)树状数组+dp+离散化】Counting Sequences
https://www.bnuoj.com/v3/contest_show.php?cid=9149#problem/G [题意] 给定一个数组a,问这个数组有多少个子序列,满足子序列中任意两个相邻数 ...
- 贝尔数--Codeforces908E. New Year and Entity Enumeration
给n<=50个长度m<=1000的二进制数,记他们为集合T,求满足下面条件的集合S数:令$M=2^m-1$,1.$a \epsilon S \Rightarrow a \ \ xor \ ...
- 莫比乌斯反演套路二--(n/d)(m/d)给提出来--BZOJ3529: [Sdoi2014]数表
一个数表上第i行第j列表示能同时整除i和j的自然数,Q<=2e4个询问,每次问表上1<=x<=n,1<=y<=m区域内所有<=a的数之和.n,m<=1e5,a ...
- Tyvj 1221 微子危机——战略
背景 №.3Summer联盟战前兵力战略转移. 描述 Summer的兵力分布在各个星球上,现在需要把他们全部转移到某个星球上.Summer一共拥有N个星球(1-N),你要把这N个星球上的兵力转到第M个 ...
- Python基础之 一 补充
三元运算: 语法:result = 值1 if 条件 else 值2 当条件为真时,result = 值1 当条件为假时,result = 值2 进制: 二进制:01 八进制:01234567 十进制 ...