图片懒加载（延迟加载）原理及实现

作为一个小前端，还有很多概念或者是技术我们不清楚，那么，我们能做的就是多多实践，最佳实践就是去看看那些流量大的网站怎么做的啦~哈哈

经常听别个说懒加载、懒加载，作为一名有上进心的程序媛，上网扒了拔，轻松get到概念了，废话不多说，进入正题：

为了减少流量，提升网站性能，图片展示型网站会采用懒加载。一般第一屏的图片直接显示，从第二屏开始采用懒加载。

通常的做法是在对<img>标签的src属性放占位图片的地址，而真实的图片地址放在img标签的某个属性中，如data-img或original之类的。

就像这样：<img data-img="真实地址" src="占位图片地址" >

鼠标滚动时判断待加载资源到可视区域顶端的距离，如小于屏幕高度，把data-img的值赋给src，然后去掉data-img属性。

路漫漫其修远兮，我将上下而求索~写代码不能马虎啊

时间： 2024-10-12 04:03:21

图片懒加载（延迟加载）原理及实现的相关文章

(可视区域加载)图片懒加载实现原理

参考文章:http://www.cnblogs.com/xiaohuochai/p/4859485.html http://www.cnblogs.com/xiaohuochai/p/4859899.html http://www.cnblogs.com/vajoy/p/4263291.html 定义 图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页.可以减少请求数或者延迟请求数,优化性能. 呈现形式 [1]延时加载,使用setTimeout或set

使用jQuery实现图片懒加载原理

原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量. 所以,淘

js可视区域图片懒加载

可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery可视区域图片懒加载</title> <script src="http://libs.baidu.com/jquery/2

原生JS实现图片懒加载之一：Element.getBoundingClientRect()

实际项目开放中,特别是电商项目,由于有大量的图片加载必然会影响性能,所以实现图片的懒加载是非常有必要的. 实现图片懒加载的知识点 标签的data-属性 可视区域的监听 实现图片懒加载的原理 <img alt="loading..." data-src="images/1.jpg"> 当我们监听到图片进入可视区域后,就将data-src到值赋值给src属性 <script> var images = document.querySelector

Vue图片懒加载

图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果.这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题. 实现步骤: 1.安装插件: npm install vue-lazyload --save-dev 2. main.js引入插件: import VueLazyLoad

懒加载——实现原理

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

设计模式（节流模式-----图片懒加载）

昨天把节流模式写了下,今天来个节流模式的应用----图片懒加载(图片延迟加载) 废话不多说,直接懒加载代码吧!哈哈 1 //创建懒加载对象 @id是将要获取外部容器的id var Lazyload = function(id) { 2 this.container = document.getElementById(id); 3 this.imgs = this.getImgs(); 4 this.init();//初始化 5 } 6 Lazyload.prototype = { 7 //初始化

图片懒加载--lazyload.js的用法

这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么解决这个问题呢?jQuery插件库中有个插件lazyload.js可以实现图片懒加载. lazyload.js的原理就是将真正要加载的图片的地址放在另一个属性中,而图片的src的地址则是一个1px *1px的占位图,这样在网页加载过程中,首先下载的是这个占位图,当网页加载完成后,下拉页面时再下载在可