一、什么是懒加载?

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

二、为什么使用懒加载?

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

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

引入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. CAD参数绘制填充(网页版)

    填充是CAD图纸中不可或缺的对象,在机械设计行业,常常需要将零部件剖开,以表现其内部的细节,而这些被剖开的截面会用填充来表示:在工程设计行业,一些特殊的材料或地形,也会用填充来表示. js中实现代码说 ...

  2. 【VScode】使用VScode 来写markdown时序图

    准备工作 在VScode中下载插件Markdown Preview Enhanced插件 创建一个.md文件 在VScode中打开文件,界面内点击右键可以看到Open preview to the s ...

  3. python selenium等待特定网页元素加载完毕

    selenium等待特定元素加载完毕 is_disappeared = WebDriverWait(driver, 8, 0.5, ignored_exceptions=TimeoutExceptio ...

  4. assert.deepEqual()

    assert.deepEqual(actual, expected[, message]) 深度比较 actual 和 expected 参数,使用比较运算符(==)比较原始值. 只考虑可枚举的&qu ...

  5. nginx下TP5 隐藏入口文件+支持pathinfo模式+配置多项目根目录

    首先说下项目目录情况  跟目录/usr/share/nginx/html/(别说怎么这么深  0.0) html文件夹下面两个目录 pssh  pssh_shop 两个tp5项目分别对应两个二级域名 ...

  6. linux下的文档处理及tar命令

    1.使用cat命令进行纵向合并 使用‘>’是将左边的内容覆盖到右边 使用‘>>’是将左边的内容追加到右边文档中 还可使用‘>’将不同文件进行合并 2.管道符‘|’统计行数 使用 ...

  7. odoo权限配置讲解2

    今天我们在来讲解一下odoo中配合使用公司开发的权限配置模块,简单配置odoo权限的操作说明 接着上篇讲到的,昨天我们只是做了一个简单的表单模型的筛选规则 今天来讲解一下如何在创建内贸报价单的时候,在 ...

  8. MySQL简单查询和单表查询

    MySQL记录操作 概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用 ...

  9. I - DFS(依然是漫水填充)

    Description There is a rectangular room, covered with square tiles. Each tile is colored either red ...

  10. SQLAlchmy模块详解

    之前写过一篇博客介绍过sqlalchemy的基本用法,本篇博客主要介绍除增删改查以外SQLAlchemy对数据库表的操作,主要内容有单表操作.一对多操作.多对多操作. 一.单表操作 单表操作的增删改查 ...