Lyg_gis的博客

背景当h5的首屏为一张整图的时候，图片又比较大，加载起来比较慢。一般常用的方法是将图片无损压缩 常用的压缩网站，缺点 就是压缩后的图 如果在网络较差的情况下，加载也会有一定的延迟，如果网络更加不稳定，会导致白屏的时间较长，影响用户体验。第二种方式 如同Medium的实现方案，首先利用一个缩略图来代替原图，提高用户体验。效果如下：流程页面加载------展示缩略图 并设置为模糊 — 同时下载原图— 加载完原图以后替换缩略图 --关闭模糊效果代码const imgDiv = new Image(

前提由于每个同学的考试的科目可能不一样，但是老师统计的时候需要获取到每个同学的科目分数。结果如下后端返回的数据格式如下[{"id":1,"sid":"11","username":"小明","password":"123","sex":"女","yuanxi":"计算机学院","banji":"161","realname":"学生","score":[{"id":null,"sid":"11","kemu":"科目一","score":" 98","user":null},{"id":null,"

法一：window.onload：当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。 window.onload=function(){　　　　　　　dosth//你要做的事情　　　　}法二： $(document).ready()：会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-src属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。流程：1.将页面中的img标签指向一张小的图片（load

canvas通过Javascript来绘制2D图形.是逐像素进行渲染的。其位置发生改变，会重新进行绘制。canvas的使用步骤：获取元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；调用CanvasRenderingContext2D对象进行绘图。特点：依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，

JavaScript原理设置一个定时器来替换img的src；5张图 ，当索引变成6时 ，设置索引为第一张图；HTML <div class="lunbo"> <ul class="my_ul"> <li class="my_li"><img src="img/1.png" id="img" /></li> </ul> </div> <div style=" display:

这里写目录标题AMD（Asynchronous Module DefinitionCMD（Common Module Definition）AMD/CMD比较定义module时对依赖的处理加载方式执行module的方式总结ES6模块化默认的导入与导出按需导入与导出直接导入并执行一些问题什么是模块化？为什么要用模块化？模块化的好处？AMD、CMD、CommonJS模块规范的对比分析：模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。

效果图原理通过控制span的width来实现 span的颜色为白色 上下两个div为蓝色html<div class="wrap"> <div class="loadAn"> <div class="up"></div> <div class="down">&l...

只需要在页面开头加上这句<meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

浏览器渲染页面的过程用户输入URL地址浏览器解析URL解析出域名浏览器将主机域名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 如果没有 再向浏览器默认的DNS服务器发送查询请求 同时缓存）浏览器将端口号从url中解析出来浏览器建立一条与目标Web服务器的TCP连接（三次握手）浏览器向服务器发送一条HTTP响应报文服务器向浏览器返回一条HTTP响应报文关闭连接 浏览器解析文...

一些常用的状态码序号类别原因1**信息性状态码接收的请求正在处理2**成功状态码请求正常处理完毕3**重定向状态码需要进行附加操作以完成请求4**客户端错误状态码服务器无法请求处理5**服务器错误状态码服务器处理请求出错详细解释2****成功**200 ok 成功204 no content 请求成功 但是没有结果返...

引用加载地图的jsL.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; var parts ...

.bck_color{ background-color: #00F7DE; } // $("ul").on("click","li",function(){ $("ul li").removeClass("bck_color"); $(this).addClass("bck_color"); });

前端前端结构leaflet加载天地图引用leaflet插件 map.jsL.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProv...

安装axios1)：npm install2)：npm install vue-axios --save3)：npm install qs.js --save　　//它的作用是能把json格式的直接转成data所需的格式在main 界面引用import Vue from 'vue'import axios from 'axios'import qs from 'qs'...

效果看了一早上flex视频 尝试修改一下以前项目的布局格式 <div class="container"> <div class="peripheral" id="wrapper1"> <!-- <div id="scrollOne"> --> <ul class="featurecon"> <li f...

界面html <div class="content"> <div class="login-wrap"> <form id="user_login" action=""> <h3>登 录</h3> <input class="name" name="" id="accountNam...

导航栏<div class="daohang"> <div class="ig" id="qx"> <img id="" class="app-map-btn app-tap" src="res/im/tq.png"/> <span>气象</span> </div> <div clas...