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元素或是其他元素的 ...
随机推荐
- react.js工程结构
1.index.html :UI界面入口.挂在点: 2.manifest.json:应用说明 3.package.json:工程说明.依赖说明等 4.source : 代码源文件
- vue hash模式和404页面的配置
1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是 ...
- c++基础_字符串对比
#include <iostream> #include <string.h> #include <algorithm> using namespace std; ...
- LINUX系统---初级相关操作和知识
LINUX系统的初级,从安装LINUX开始,到处理简单的运维问题.搭建各种服务.解决网路问题.缓解服务器压力,写简单的shell脚本. 我们从基本的入门开始搞事情: 安装LINUX系统 对磁盘的使用 ...
- auto_ptr 实现
#ifndef MYAUTOPTR_H #define MYAUTOPTR_H template<typename _T> class MyAutoPtr { private: _T* _ ...
- JQuery Easy UI 简介
[什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...
- W3C Blog: HTML-下一步是什么?
HTML5.1 草稿版: 地址:https://www.w3.org/TR/html51/introduction.html#a-quick-introduction-to-html 2016年3月0 ...
- Windows学习总结(12)——Windows 10系统开始运行-cmd命令大全
gpedit.msc-----组策略 sndrec32-------录音机 Nslookup-------IP地址侦测器 explorer-------打开资源管理器 logoff---------注 ...
- windows资源监控常用计数器解释
随笔有些是自己写的,有些是根据网上的东西自己整理的,文章基本都是别人的,只是为方便查看复制到那里
- 详解js变量声明提升
之前一直觉会认为javascript代码执行是由上到下一行行执行的.自从看了<你不知道的JS>后发现这个观点并不完全正确.先来给大家举一个书本上的的例子: var a='hello wor ...