【前言】
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
【思路】
将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src
【主体】
(1)关于各种宽高:
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; 网页被卷去的左: document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率的高: window.screen.height; 屏幕分辨率的宽: window.screen.width; 屏幕可用工作区高度: window.screen.availHeight;
(2)方案一
jqueryLazyload方式
下载地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
<section class="module-section" id="container"> <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/> </section>
require.config({ baseUrl : "/static", paths: { jquery:'component/jquery/jquery-3.1.0.min' jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载 }, shim: { jqueryLazyload: { deps: ['jquery'], exports: '$' } } });
require( [ 'jquery', 'jqueryLazyload' ], function($){ $(document).ready(function() { $("img.lazy-load").lazyload({ effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉) threshold : 180, //预加载,在图片距离屏幕180px时提前载入 event: 'click', // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动) container: $("#container"), // 指定对某容器中的图片实现效果 failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则 //不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况 }); }); });
为了代码可读性,属性值都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示是写死的640x480,如果是响应式页面,高宽需要动态计算。
dome演示地址:http://h5.sztoda.cn/test/testLazyLoad
(3)echo.js方式
介绍一款非常简单实用轻量级的图片延时加载插件echo.js,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去!
下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo
<style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style> <div class="demo"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> </div> <script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载 }); </script>
说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
【总结】
两者都非常简单,实现思路是一样的,只是jquerylazyload多几个属性。其实常用的echo就足够了,并且完全可以集成到自己项目中的公共js中,图片懒加载是相当常见且简单实用的功能,如果你的项目中还是傻瓜式的一次性全部加载,那么建议优化下~
.
相关推荐
2. **图片标记**:在需要实现懒加载的img标签上添加一个class,比如"lazy-load"。 3. **页面初始化**:在页面加载完成后,初始化Echo.js插件,并指定其需要处理的图片。 Echo.js插件的优势在于它的轻量级和易用性...
在提供的`imageLazy`压缩包中,包含了使用jQuery LazyLoad.js实现的图片懒加载示例。解压后,你可以看到一个简单的HTML文件,其中包含了一些带有`data-src`属性的图片。运行这个HTML文件,滚动页面,你会观察到当...
在这个场景中,我们关注的是Vue自定义指令`v-lazyload`,它实现了图片的懒加载功能。懒加载是一种优化策略,用于提高网页性能,仅当图片进入浏览器的可视区域时才开始加载,而不是一次性加载所有图片。 首先,我们...
图片懒加载是一种优化网页性能的前端技术,尤其适用于图片丰富的网站和应用。它通过延迟加载非可视区域的图片,直到用户滚动到它们即将进入视口时才进行加载,从而减少了首屏加载时间,提升了用户体验。以下是对这个...
3. **Vue, React, Angular等框架**:现代前端框架也有相应的库支持图片懒加载,如Vue的`vue-lazyload`,React的`react-lazyload`,它们能更好地集成到组件化开发中。 **三、优化技巧** 1. **预加载**:对于首屏...
实现图片懒加载的方法多种多样,可以使用JavaScript库如Lozad.js或LazyLoad,也可以利用HTML5的Intersection Observer API来监听元素是否进入视口,从而触发加载事件。 接下来,我们深入到**百度地图**的**定位与...
在Web开发中,图片懒加载是一种优化网页性能的技术,它允许图片在真正进入视口时才开始加载,从而减少页面初始化时的数据量和渲染时间。AngularJS,作为一个强大的前端框架,提供了多种实现图片懒加载的方法。本文将...
本资源“jquery实现图片延迟加载和ajax方式加载页面.rar”聚焦于两个核心概念:图片延迟加载(Lazy Loading)和Ajax页面加载。 **图片延迟加载**是一种优化网页性能的技术,它避免了一次性加载所有图片导致的页面...
在这个案例中,我们通过定义一个lazyload函数来实现懒加载逻辑。这个函数接收一个option参数,可以用来定义懒加载的配置选项,比如指定哪些元素的图片需要被懒加载。在代码中,我们使用了$.extend方法来合并默认配置...
而`jquery.scrollLoading.js`则是实现懒加载功能的JavaScript脚本。 在`jquery.scrollLoading.js`中,我们可以看到一个函数`initScrollLoading()`,这个函数初始化滚动加载的设置,比如设置加载阈值(threshold)和...
总的来说,Webpack和ocLazyLoad提供了一种优雅的方式来实现在AngularJS应用中的延迟加载,大大优化了应用的加载性能和用户体验。开发者可以通过配置和代码组织的方式,将应用拆分成更小的模块,并通过动态加载技术按...
按需加载(也称为懒加载)是一种优化策略,只在用户滚动到可视区域时加载图片,从而减少初次加载页面所需的时间。在jQuery中实现这一功能,我们需要以下步骤: 1. **标识未加载的图片**:首先,为需要按需加载的...
7. **工具应用**:在实际开发中,有很多现成的库可以帮助实现图片延迟加载,比如Lozad.js、LazyLoad.js等。这些工具通常已经处理好兼容性和性能问题,只需简单配置即可使用。 在提供的`demo.htm`和`js`文件中,很...
网站性能优化可以通过多种方式来实现,包括缓存机制、图片优化、代码压缩、lazy load 等。缓存机制可以将静态资源缓存在浏览器中,从而减少请求次数。图片优化可以通过压缩图片、使用图片 Sprites 等方式来实现。...
2. **图片懒加载(Lazy Load)**:考虑到性能和用户体验,可能采用了图片懒加载技术。这种技术仅在图片进入视口时才加载,减少页面初次加载的时间。可以使用`$(window).scroll()`监听滚动事件,结合`$(element).is('...
1. **jQuery**:虽然主要是一个DOM操作库,但通过插件如`jQuery.lazyload`可以实现图片延迟加载。 2. **Bootstrap**:提供了响应式图像类,如`.img-responsive`,使得图片在不同设备上自动调整大小。 3. **React**...
这两种机制都是为了提高用户体验,让用户能够无缝地浏览和获取信息,而无需离开当前页面。 二、实现原理 1. 监听滚动事件:在移动设备上,应用需要监听触摸屏幕的滑动事件,当检测到用户到达了页面的顶部或底部时,...
瀑布流布局,又称为Masonry布局,是一种网页设计布局方式,常用于展示图像或商品,使得页面在有限的空间内能以更美观和高效的方式排列多张图片。 瀑布流布局的核心在于动态调整各个元素的宽度和位置,以达到自适应...