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元素或是其他元素的 ...
随机推荐
- python的学习之路day1
软件:python3.pycharm开发工具 python的开始:print("hello world") 注意:python3需要加上() 1.变量是什么:在程序运行过程中它的值 ...
- java 整型数组基本排序,冒泡,快速选择,插入,归并
在学java泛型,于是把排序拿来练练手了 import java.util.Arrays; public class GenericArraySort { public static void mai ...
- Do you kown Asp.Net Core -- 配置Kestrel端口
Kestrel介绍 在Asp.Net Core中,我们的web application 其实是运行在Kestrel服务上,它是一个基于libuv开源的跨平台可运行 Asp.Net Core 的web服 ...
- GitLab搭建详细过程
一.前提 系统:Centos 6.5 软件版本:gitlab-7.8.4 Selinux:关闭 防火墙规则:先清空(搭建好了后续自己添加相关放行规则) 二.yum源配置和相关依赖包 1.添加epel源 ...
- [转载] Redis集群搭建最佳实践
转载自http://blog.csdn.net/sweetvvck/article/details/38315149?utm_source=tuicool 要搭建Redis集群,首先得考虑下面的几个问 ...
- mysql全日志添加时间戳以及SQL多行问题处理(更新)
需求引入 在日常运维中,DBA可能经常会查看某个Query_Id对应哪些SQL,例如追查大事务问题:也可能业务端需要查看某时间端内所有SQL. 然而mysql在输入全日志的时候没有在每行SQL前打印时 ...
- 使用sshkey的方式访问gitlab
在使用jenkins创建jobs的时候配置git为ssh访问的方式报错 记录错误信息 Failed to connect to repository : Command "/usr/bin/ ...
- 重写Fields 控制models 数据输出字段
models: public function Fields() { $fields = parent::Fields();//原来models输出字段 $fields['parentComment' ...
- 老男孩Python全栈开发(92天全)视频教程 自学笔记01
day1课程目录: 开课介绍(1) 开课介绍(2) 开课介绍(3) 电脑简史(1) 电脑简史(2) 计算机结构 day1课程内容梳理: 导师介绍: Alex Li(金角大王):买了一辆特斯拉,喜欢姑娘 ...
- 后台工作者HangFire与ABP框架Abp.Hangfire及扩展
HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于大家来说,比较方便. HangFire是什么 Hangfire是一个开源框架(.NET ...