一、什么是懒加载?

  对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。

二、为什么使用懒加载?

  懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

理论性知识大家都有自己的获取渠道,不多说,下面看具体内容

引入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图片懒加载(滚动加载)是否生效的更多相关文章

  1. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  2. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  3. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

  4. 【前端优化】js图片懒加载及优化

    一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

  5. js图片懒加载(滚动加载)判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  6. web性能优化之js图片懒加载

    html <div class="container"> <ul> <li> <div id="first" clas ...

  7. js——图片懒加载

    <img class="js-lazy-image centered" src="./img/dog-running.svg" width="4 ...

  8. 原生js图片懒加载特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

  1. Equations

    Equations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  2. How Many Answers Are Wrong

    How Many Answers Are Wrong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...

  3. 自建梯子教程:vultr+ssr+SwitchyOmega

    1 综述 在饱受蓝灯挂掉之苦半个月后,终于决定自己搭建VPS服务器FQ了.虽然网上VPS服务器教程很多,但是我按照那些教程弄好VPS服务器总是不稳定,用着用着就不能用了.这应该是这次GFW升级带来的后 ...

  4. SSL证书简介

    前言 之前写了一篇本站点如何部署SSL证书的文章<Centos7.4下用Docker-Compose部署WordPress(续)-服务器端用Nginx作为反向代理并添加SSL证书(阿里云免费DV ...

  5. 15.javaweb XML详解教程

    一.XML语言简介 1,  作用:用于描述和保存现实中具有某种关系的数据,还可以作为软件配置文件,和描述程序模块之间的关系 2,  语法: 首先 先看一个XML文件的组成部分 关于文档声明 Versi ...

  6. centos6.5安装rabbitmq3.6.14

    The minimum version of Erlang/OTP required to run RabbitMQ server 3.6.0 through 3.6.14 is R16B03. St ...

  7. C#自定义运行时窗体设计器Runtime FormDesigner

    写在前面:因为业务的需要,有时会使用到自定义运行时窗体设计器Runtime FormDesigner,实现的功能,就是IDE设计器的简化.设想一下,如果可以在程序运行时,再设计一个Form,然后编译代 ...

  8. 直接调用VS.net2005中的配置界面

    以前做Winform程序,居然专门做一个界面来配置连接字符串.今天无意中发现:竟然可以直接调用VS.net2005中的配置界面来处理. 使用方法也非常简单: 引用C:\Program Files\Mi ...

  9. 【JAVA零基础入门系列】Day15 对象的比较

    最近一直有事,博客也停笔了一段时间,十分抱歉. 这一篇主要讲讲对象的比较,什么是对象的比较,我们知道两个数值类型只需要用"=="符号即可进行相等判断,但如果是两个Goods对象呢? ...

  10. 【功能代码】---2.patchca生成验证码

    Java使用patchca生成验证码        Patchca是Piotr Piastucki写的一个java验证码开源库,打包成jar文件发布,patchca使用简单但功能强大. 本例实现了自定 ...