一、什么是懒加载?

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

二、为什么使用懒加载?

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

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

引入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. IdentityServer4 禁用 Consent screen page(权限确认页面)

    IdentityServer4 在登录完成的适合,会再跳转一次页面(权限确认),如下: 我之前以为 IdentityServer4 就是这样使用的,但实际业务场景并不需要进行权限确认,而是登陆成功后直 ...

  2. 手工搭建ABP框架(1) - Web项目

    为了防止不提供原网址的转载,特在这里加上原文链接: http://www.cnblogs.com/skabyy/p/7295533.html ABP是 ASP.NET Boilerplate Proj ...

  3. <template> 标签

    <template> 元素,用于描述一个标准的以 DOM 为基础的方案来实现客户端模板.该模板允许你定义一段可以被转为 HTML 的标记,在页面加载时不生效,但可以在后续进行动态实例化.( ...

  4. ASP.NET MVC中URL末尾斜杠的实现

    在网站的SEO优化中,通常都会涉及到URL结尾斜杠的问题. http://blog.sina.com.cn/s/blog_828e7ce40100srj1.html http://www.dengyo ...

  5. GCC 中的编译器堆栈保护技术

    GCC 中的编译器堆栈保护技术 前几天看到的觉得不错得博客于是转发了,但这里我补充一下一些点. GCC通过栈保护选项-fstack-protector-all编译时额外添加两个符号,__stack_c ...

  6. php多个文件上传

    表单如下 <form class="form-horizontal" action="{:U('System/addAdvert')}" method=& ...

  7. [转载] Redis系统性介绍

    转载自http://blog.nosqlfan.com/html/3139.html?ref=rediszt 虽然Redis已经很火了,相信还是有很多同学对Redis只是有所听闻或者了解并不全面,下面 ...

  8. 2017EIS CTFwriteup

    EIS2017也就是2017年高校网络信息安全管理 运维挑战赛,全国一百多所高校参赛,侥幸拿了个地区三等奖,事先不知道理论赛占分比,不然就会是二等奖(吐槽),生活没有如果,下次努力吧. 比赛已经结束大 ...

  9. swaggerui在asp.net web api core 中的应用

    Swaggerui 可以为我们的webapi提供美观的在线文档,如下图: 实现步骤: NuGet Packages  Install-Package Swashbuckle.AspNetCore 在s ...

  10. 跨域请求cookie获取与设置问题

    描述:最近做项目遇到了cookie的问题,项目为前后端分离项目,前台有分外网IP(A外)和内网IP(A内),后台服务只有一个内网IP(B内). 现象:当我前台异步请求发送给后台的时候,后台并不能获取到 ...