jquery获取窗口高度和窗口高度,$(document).height()、$(window).height()
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,
在业务开发过程中,移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。
我想,工作一段时间的都碰见过上拉加载更多需求,现在这种插件也蛮多的,也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题,就是下拉到最底部,刷新浏览器,浏览器会记住这个距离,从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响,于是自己就研究研究,写了一个上拉加载更多的组件。
今天,我们接着讨论图片图片懒加载。这是前端性能优化中老生常谈的话题了。旨在提升页面初始化渲染性能和用户体验。
因为CSS里部分属性是继承父级而来的,height就是其中之一,当前html标签height为0,自然而然body100%也为0。
利用JS来控制页面控件的显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
案例验证的浏览器为 - Google Chrome 版本 119.0.6045.123(正式版本)(arm64)
原理: 图片的加载是由src引起的,当对src赋值时浏览器会请求图片资源,基于这个,可以利用html5的属性data-xxx来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了,也就是懒加载了 方法: 1.使用lazyload插件,引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片,即一张临时的loading.gif图,将真正的图片路径放在data-original属性中 3.当JS监听到该图片元
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
最近在参加面试找工作,陆陆续续的面了两三家。其中一个面试官问到了一个问题:如何判断一个元素是否在可视区域?由于平时处理的不多,所以一时没有回答出来,后来研究了下,所以有了这篇文章。
Lazyload 可以加快网页访问速度,减少请求,实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时,动态设置 标签的 src 属性,浏览器会根据 src 属性发送请求加载图片。
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
普通模式下输入15G,跳转到15行 普通模式下输入>> 整行将向右缩进(使用,用于格式化代码超爽) 普通模式下输入<< 整行向左回退 普通模式下输入:进入命令行模式下对shiftwidth值进行设置可以控制缩进和回退的字符数
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
当进行布局的时候,有时候需要div元素根据屏幕的宽度和高度进行自适应,而不是根据内容
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。
文章推荐:http://blog.csdn.net/creasher/article/details/51353416
图片懒加载就是鼠标滑动到哪里,图片加载到哪里。总的来说,一般页面打开,会同时加载页面所有的图片,如果页面的图片请求太多会造成很卡很慢的现象,为了避免这一现象,利用懒加载图片的方法,提高性能(典型:淘宝)
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。
px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。
css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。
1.什么是懒加载? 懒加载也就是延迟加载。 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为同一张图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。 demo: //所有img元素的src属性值是同一个图片地址,自定义属性data-src里存储的是真正需要加载的图面地址,当图片出现在浏览器的可视区域内时,再把data-src的属性值赋值给对应的img元素的src属性 <ul cla
E:\MyProjects\TMP\frontend>npm install html2canvas
https://www.zhihu.com/zvideo/1380450791975731200
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 (天空)
最近因为需要做一个小网站,但是呢,因为图片比较多,打开网页速度很慢,服务器压力就会很大。不仅影响渲染速度还会浪费带宽,比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。于是就想到了图片懒加载来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能,可以大幅度的提高网页加载速度,效果很明显,于是想着将这个方法记录下来,方便以后或者有需要的人使用,方法和功能都是亲测可用,请放心观看。
服务端渲染后的图片地址并不立即赋给img标签的src属性,而是赋给自定义属性如data-src 当img标签呈现在当前浏览器可视窗口时,动态设置img标签的src属性
定位为什么需要定位> 定位可以让盒子在指定盒子内自由移动位置,并压住其他盒子,而浮动只能让盒子排在一行;定位的组成>定位是定位模式+边偏移> 定位模式用于指定一个元素在文档中的定位方式,使用CSS属性 position;值包括static、relative,absolute,fixed> 边偏移决定了改元素的最终位置;CSS中有top left right bottom四个属性;配合定位属性position使用- 静态定位static> 是元素的默认定位方式,按照标准流特性摆放位置,没有偏移- 相对定位re
做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了问题.
一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除
本次我把CSS中的重难点整理出来,总共54个核心知识点,供大家复习,希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点,同时也是面试必问的内容。
前段时间,群里有位同学问起 Ajax 加载的问题,这个不属于模板制作系列教程的内容,因此单独再出一个使用技巧系列的教程。
今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。
在上两篇文章中,我们学习了元素中必知重要属性和方法和 Angular 中自定义 Video 操作,没有度过的读者可先了解。
vim使用笔记 vim Linux 编辑器 快捷键 本文主要记录自己在使用linux以及vim编辑器的过程中常用到的快捷键。 一、Linux 1、删除文件|文件夹 # 删除文件 $ rm filename # 删除文件夹 $ rm -r dirctory 2、重命名 $ mv oldname newname 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c 二、vim 1、移动到行首、行尾 普通模式下: 移动到行首:0 移动到行尾:$ 2、删除整行 普通模式: dd
📢最近准备换工作了,所以整理了一些前端高频大厂面试题,分享给大家,如有问题欢迎留言指正,面试专栏我会长期更新,欢迎大家点赞🤞、收藏📌,关注➕,感谢! 1. px 和 em 的区别 📢 参考回答: px全称pixel像素,是相对于屏幕分辨率而言的,它是一个绝对单位,但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的,这点表现的是绝对性。但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的,这点表现的是相对性 em是一个相对长度单位,具体的大小需要相对于父元素计算,比如父元素
移动端适配最简单的是通过js动态计算 viewport 的缩放值,但过于粗暴,会导致页面图片文字失真模糊。目前,移动端页面一般使用 rem 或 vw / vh 开发会较为方便,下面以 rem 为例:
由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击下一页,才能看到更多的内容。 有很多网站使用 无限分页 的模式,即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型,讲述其中奥妙。 原理图 实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。 因此,可能会出现两种情况: 1 当页面的内容很
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置.
图片懒加载其实已经是一个近乎“烂大街”的词语了,在大大小小的面试中也会被频繁的问到,我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理,但由于自己平时很少做“图片”相关的处理,对于“懒加载”也是知之甚少,所以在面试中问答的也不是很好。
众所周知,前端内容多而杂,经过查阅各种资料,总结了一些知识点,以备后续复习使用。文章分为上(html,css)中(js)下(vue)三部分。
在开发过程中,我们可能经常需要监听元素是否进入可是区域,平时我们都是监听滚动条的高度,但是这样非常消耗资源,在这里我们可以使用 IntersectionObserver 这个 api 来进行监听,使用方法如下
含义:采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素。
导语:作者本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让人对文本的操作更加精准、高效。对于未使用过 Vim 的朋友来说,可能还无法体会到这种感觉。由于使用 Vim 有一定的学习成本,只有做到非常熟练的程度才能感受到它带来的快捷。
我本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让我对文本的操作更加精准、高效。
问题:然后利用new Date() 转换时间戳时,使用微信开发工具、安卓都没问题,ios中无法展示并报错 “invalid date”。
领取专属 10元无门槛券
手把手带您无忧上云