img 的data-src 属性及懒加载
img 的data-src 属性及懒加载

一、什么是图片懒加载 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。 通俗一点: 1、就是创建一个自定义属性src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。 2、当页面滚动直至此图片出...

正则速记口诀

正则速记口诀正则其实也势利,削尖头来把钱揣; (指开始符号^和结尾符号$)特殊符号认不了,弄个倒杠来引路; (指\. \*等特殊符号)倒杠后面跟小w, 数字字母来表示; (\w跟数字字母;\d跟数字)倒杠后面跟小d, 只有数字来表示;倒杠后面跟小a, 报警符号嘀一声;倒杠后面跟小b, 单词分界或退格;倒杠后面跟小t, 制表符号很明了;倒杠后面跟小r, 回车符号知道了;倒杠后面跟小s, 空格符号很重

简单常用好看的前端客服代码

简单常用好看的前端客服代码<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style type="text/css"> *{margin:0;paddi

简单js倒计时代码

不是原生不发。简单倒计时。见代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .HotDate{height: 50px;width: 250px;margin: 2px aut

很简单的js图片滚动

以前记在有道云笔记上的,今天有时间转过来。没有用第三方的js插件,纯原生。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"

html,body 的区别

www首页改了下版,发现自适应到手机后有点超宽,用手有左右滑动的感觉。关键是里面有这句css。.layui-col-space15 { margin: -7.5px;}心想把超宽左右屏蔽就好了,加了这句cssbody { overflow-x: hidden;}结果发现还是超宽,跑到 layui看了下他的论坛css,发现他是这样写的。html,body { overflow-x:

TP升级到5.17后的一点安全小问题的排除

前几天因为一些别的原因,网站要小小的改版下,后来想现在tp已经升到了5.18了,而我那时候是5.0时代,反正内容不多,干脆升下级吧。别的不表,一切顺利。毕竟老司机了,干脆加了个快捷发帖。方便自己和有些网友也可以发帖。后台加了审核功能,默认是关闭了,反正网站没什么人气,一阵得意。昨天快捷发帖

纯css实现超宽图片全屏居中(兼容淘宝店铺)

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &