一、什么是懒加载?

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

二、为什么使用懒加载?

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

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

引入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. hdu 3091 Necklace(状态压缩类似于TSP问题)

    Necklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 327680/327680 K (Java/Others)Total ...

  2. .Net Core在Ubuntu上操作MySql折腾实录

    .Net Core 2.0 发布也这么久了,一直想着折腾着玩玩,无奈一直没时间,这几天准备开始好好学习下C#在跨平台方面的应用,记录下来以备自己以后回忆.学习. 本篇博客的主要内容: MySql在Ub ...

  3. 网络基础四 DNS DHCP 路由 FTP

    第1章 网络基础 1.1 IP地址分类 IP地址的类别-按IP地址数值范围划分 IP地址的类别-按IP地址用途分类 IP地址的类别-按网络通信方式划分 1.2 局域网上网原理过程 DHCP原理过程详情 ...

  4. 0_Simple__simpleCallback

    学习回调函数的基本概念,并在CUDA的任务流中插入基于CPU的主机函数,作为回调函数使用. ▶ 源代码:没有用到的部分被注释起来了 /*multithreading.h*/ #ifndef MULTI ...

  5. 【翻译】.Net Core的意义

    想要了解.Net Core的意义,就必须要了解拥有很长历史的.Net Framework,.Net Framework1.0于2002年发布.从那开始,每隔两年就会有一个主版本推出.伴随着Visual ...

  6. 【转载】以Java的视角来聊聊SQL注入

    以Java的视角来聊聊SQL注入 原创 2017-08-08 javatiku Java面试那些事儿 在大二就接触过sql注入,之前一直在学习windows逆向技术,认为web安全以后不是自己的从业方 ...

  7. js中的路由匹配

    routie插件:http://projects.jga.me/routie/ /** * 路由 * @example * routie( * { * '/':function(){ }, * '/m ...

  8. URLs对象 blob URL

    把指向数据的URL保存到file或者blob对象里,好处就是不需要先文件读取内容然后才能用.   function createObjectURL(blob){if (window.URL){retu ...

  9. JMeter基础教程3:脚本录制篇

    对于一些JMeter初学者来说,录制脚本可能是最容易掌握的技能之一.虽然我不建议录制性能脚本(因为录制的脚本比较混乱,必须要通过二次处理才可正常使用),但有时做总比不做要好,是吧?下面我们详细介绍使用 ...

  10. Spring IOC容器分析(4) -- bean创建获取完整流程

    上节探讨了Spring IOC容器中getBean方法,下面我们将自行编写测试用例,深入跟踪分析bean对象创建过程. 测试环境创建 测试示例代码如下: package org.springframe ...