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元素或是其他元素的 ...
随机推荐
- IdentityServer4 禁用 Consent screen page(权限确认页面)
IdentityServer4 在登录完成的适合,会再跳转一次页面(权限确认),如下: 我之前以为 IdentityServer4 就是这样使用的,但实际业务场景并不需要进行权限确认,而是登陆成功后直 ...
- ASP.NET Core的身份认证框架IdentityServer4(4)- 支持的规范
IdentityServer实现以下规范: OpenID Connect OpenID Connect Core 1.0 (spec) OpenID Connect Discovery 1.0 (sp ...
- 如何成为一个javascript高手【转载】
原文网址: http://www.cnblogs.com/keva/p/how-to-become-a-javascript-badass.html 英文网址:http://www.clientc ...
- Node.js CVE-2017-1484复现(详细步骤)
0x00 前言 早上看Sec-news安全文摘的时候,发现腾讯安全应急响应中心发表了一篇文章,Node.js CVE-2017-14849 漏洞分析(https://security.tencent. ...
- Lambda转sql部分代码保存
public class SqlExpressionTree { public string GetQuerySql<T>(Expression<Func<T, bool> ...
- VS2015 使用Xunit来进行单元测试
安装Xunit: Xunit的安装现在不需要插件支持了,直接使用NuGet安装如下两个库即可: PM> Install-Package xunit PM> Install-Package ...
- 1045-access denied for user 'root'@
在用sqlyog图形界面远程登录阿里云mysql数据库的时候出现了如下的问题, 1045-access denied for user 'root'@ 刚开始以为阿里云esc的安全组并没有配置3306 ...
- Anaconda快捷搭建Python2和Python3环境
我们在使用Pycharm编辑Python程序经常会因为不熟悉Python2和Python3的一些代码区别而导致错误,我们知道他们之间很多代码是必须运行在对应版本中的,否则是会报错的.因此,本文介绍一个 ...
- WebGL学习(2) - 3D场景
原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...
- Hive 学习笔记(启动方式,内置服务)
一.Hive介绍 Hive是基于Hadoop的一个数据仓库,Hive能够将SQL语句转化为MapReduce任务进行运行. Hive架构图分为以下四部分. 1.用户接口 Hive有三个用户接口: 命令 ...