`

前端实现图片懒加载(lazyload)的两种方式

阅读更多

【前言】

      在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

 

【思路】

      将页面里所有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中,图片懒加载是相当常见且简单实用的功能,如果你的项目中还是傻瓜式的一次性全部加载,那么建议优化下~

 

 

 

 

 

 

 

 

 

 

.

 

分享到:
评论

相关推荐

    js前端实现图片懒加载(lazyload)的两种方式

    2. **图片标记**:在需要实现懒加载的img标签上添加一个class,比如"lazy-load"。 3. **页面初始化**:在页面加载完成后,初始化Echo.js插件,并指定其需要处理的图片。 Echo.js插件的优势在于它的轻量级和易用性...

    jquery.lazyload.js 图片懒加载 --demo

    在提供的`imageLazy`压缩包中,包含了使用jQuery LazyLoad.js实现的图片懒加载示例。解压后,你可以看到一个简单的HTML文件,其中包含了一些带有`data-src`属性的图片。运行这个HTML文件,滚动页面,你会观察到当...

    Vue自定义图片懒加载指令v-lazyload详解

    在这个场景中,我们关注的是Vue自定义指令`v-lazyload`,它实现了图片的懒加载功能。懒加载是一种优化策略,用于提高网页性能,仅当图片进入浏览器的可视区域时才开始加载,而不是一次性加载所有图片。 首先,我们...

    图片懒加载--适合你的前端技巧

    图片懒加载是一种优化网页性能的前端技术,尤其适用于图片丰富的网站和应用。它通过延迟加载非可视区域的图片,直到用户滚动到它们即将进入视口时才进行加载,从而减少了首屏加载时间,提升了用户体验。以下是对这个...

    图片懒加载

    3. **Vue, React, Angular等框架**:现代前端框架也有相应的库支持图片懒加载,如Vue的`vue-lazyload`,React的`react-lazyload`,它们能更好地集成到组件化开发中。 **三、优化技巧** 1. **预加载**:对于首屏...

    整合图片懒加载及百度地图定位与显示

    实现图片懒加载的方法多种多样,可以使用JavaScript库如Lozad.js或LazyLoad,也可以利用HTML5的Intersection Observer API来监听元素是否进入视口,从而触发加载事件。 接下来,我们深入到**百度地图**的**定位与...

    angular实现图片懒加载实例代码

    在Web开发中,图片懒加载是一种优化网页性能的技术,它允许图片在真正进入视口时才开始加载,从而减少页面初始化时的数据量和渲染时间。AngularJS,作为一个强大的前端框架,提供了多种实现图片懒加载的方法。本文将...

    jquery实现图片延迟加载和ajax方式加载页面.rar

    本资源“jquery实现图片延迟加载和ajax方式加载页面.rar”聚焦于两个核心概念:图片延迟加载(Lazy Loading)和Ajax页面加载。 **图片延迟加载**是一种优化网页性能的技术,它避免了一次性加载所有图片导致的页面...

    基于jquery的图片懒加载js

    在这个案例中,我们通过定义一个lazyload函数来实现懒加载逻辑。这个函数接收一个option参数,可以用来定义懒加载的配置选项,比如指定哪些元素的图片需要被懒加载。在代码中,我们使用了$.extend方法来合并默认配置...

    jQuery页面滚动图片等元素动态加载实现

    而`jquery.scrollLoading.js`则是实现懒加载功能的JavaScript脚本。 在`jquery.scrollLoading.js`中,我们可以看到一个函数`initScrollLoading()`,这个函数初始化滚动加载的设置,比如设置加载阈值(threshold)和...

    Webpack 实现 AngularJS 的延迟加载

    总的来说,Webpack和ocLazyLoad提供了一种优雅的方式来实现在AngularJS应用中的延迟加载,大大优化了应用的加载性能和用户体验。开发者可以通过配置和代码组织的方式,将应用拆分成更小的模块,并通过动态加载技术按...

    jQuery按需加载图片及锚点定位效果.rar

    按需加载(也称为懒加载)是一种优化策略,只在用户滚动到可视区域时加载图片,从而减少初次加载页面所需的时间。在jQuery中实现这一功能,我们需要以下步骤: 1. **标识未加载的图片**:首先,为需要按需加载的...

    图片延迟加载

    7. **工具应用**:在实际开发中,有很多现成的库可以帮助实现图片延迟加载,比如Lozad.js、LazyLoad.js等。这些工具通常已经处理好兼容性和性能问题,只需简单配置即可使用。 在提供的`demo.htm`和`js`文件中,很...

    前端大厂最新面试题-面试记录流水记录.docx

    网站性能优化可以通过多种方式来实现,包括缓存机制、图片优化、代码压缩、lazy load 等。缓存机制可以将静态资源缓存在浏览器中,从而减少请求次数。图片优化可以通过压缩图片、使用图片 Sprites 等方式来实现。...

    jQuery实现两款不同的图片特效主题为小黄人图片展示切换特效源码.zip

    2. **图片懒加载(Lazy Load)**:考虑到性能和用户体验,可能采用了图片懒加载技术。这种技术仅在图片进入视口时才加载,减少页面初次加载的时间。可以使用`$(window).scroll()`监听滚动事件,结合`$(element).is('...

    图片原代码

    1. **jQuery**:虽然主要是一个DOM操作库,但通过插件如`jQuery.lazyload`可以实现图片延迟加载。 2. **Bootstrap**:提供了响应式图像类,如`.img-responsive`,使得图片在不同设备上自动调整大小。 3. **React**...

    上拉刷新下拉加载

    这两种机制都是为了提高用户体验,让用户能够无缝地浏览和获取信息,而无需离开当前页面。 二、实现原理 1. 监听滚动事件:在移动设备上,应用需要监听触摸屏幕的滑动事件,当检测到用户到达了页面的顶部或底部时,...

    jquery实现的简单图片列表瀑布流布局代码.zip

    瀑布流布局,又称为Masonry布局,是一种网页设计布局方式,常用于展示图像或商品,使得页面在有限的空间内能以更美观和高效的方式排列多张图片。 瀑布流布局的核心在于动态调整各个元素的宽度和位置,以达到自适应...

Global site tag (gtag.js) - Google Analytics