正文

前端插件实现图片懒加载

古兰精  古兰精  2022-09-30  112

关键词：

一、echo.js：

　　我们在开发页面的时候肯定会遇到图片比较多的时候，虽然我们可能有图片分布式的服务器，但是在客户端还是会有很大的性能开销。为了用户体验，特别是对首屏加载速度要求很高的，通常我们会考虑图片延时加载，lazyloading这款插件已经能很好地实现这一功能，可是是基于jQuery，对于移动端可能不太实用。一个非常简单实用叫echo的插件，3k左右特别适合移动端使用。步骤如下：

1、在页面中需要引入echo.css和echo.min.js

2、对需要进行延迟加载的图片采用如下写法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" />

3、对插件进行初始化：

echo.init({
　　offset:1,        //离可视区域多少像素的图片可以被加载
　　throttle:1      //图片延迟多少毫秒加载
});

　　说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。

　　data-echo指向的是真正的图片地址。非常简单，这样的话图片只有出现在视野内时才会加载，减少了页面的渲染工作量。

二、jquery.lazyload.js：

　　将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

<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，并且最好是给予初始高宽占位，以免影响布局。

vue实现一个图片懒加载插件(代码片段)

...性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。Vue.use()就像开发jQuery插件要用$.fn.extent()一样，... 查看详情

实现一个图片懒加载插件

实现一个图片懒加载插件-转Web图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制。这里需要注意的是：img在初始化的时候不要设置... 查看详情

前端懒加载以及预加载

...个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。1.懒加载：意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。实现方式：1.第... 查看详情

前端优化-图片懒加载

一、什么是懒加载　　懒加载技术(简称lazyload)是对网页性能优化的一种方案。lazyload的核心是按需加载，避免网页打开时加载过多资源，让用户等待太久，在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在... 查看详情

vue-lazyload解决图片懒加载问题

...于是一个相册展示的项目，相片数据通过月份进行分页，前端通过接口一次返回所有相片的链接，接口上并没有返回相片总数，嗯...加上有点懒也就没做滚动加载了然后发现了vue-lazyload这个插件本文只是简单记录一下插件用法和... 查看详情

jquery延迟加载(懒加载)插件–jquery.lazyload.js-web前端(w3cways.com)-web前端学习之路

LazyLoad是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片.在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置.这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延... 查看详情

懒加载——实现原理(代码片段)

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片... 查看详情

滚动加载图片（懒加载）实现原理

//扩展为jquery插件;使用方法：$("selector").scrollLoad({参数在代码中有说明})http://www.tuicool.com/articles/rUjIZzb1(function($){2$.fn.scrollLoading=function(options){3vardefaults={4//在html标签中存放的属性名称；5attr:"data-url",6// 查看详情

前端优化

雪碧图图片懒加载。【lazyload插件】路由懒加载。【Vue】webpack压缩图片使用cdnHTTP2与gzip压缩Expires模块的异步加载缩小cookie体积图标svg 查看详情

#yyds干货盘点#前端图片懒加载

前端性能优化里有图片的加载，有懒加载和预加载。那么什么是懒加载呢？懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。有的网站图片很多，而如果一上来就加载... 查看详情

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

...前头：上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化... 查看详情

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

...当然不仅限于图片，还可以有视频，flash）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求什么是懒加载懒加载怎么个懒法，就是你... 查看详情

前端性能优化--图片懒加载(lazyloadimage)(代码片段)

vuevue-cli3构建项目中实现图片懒加载(代码片段)

...来想查查看有没有更简便的方法，果不其然，vue中直接有插件可以使用，看了下实现时候的效果，实现原理都和原生js是一样的，vue果然真香！接下来我们来讲vue-lazyload插件的使用：1、安装插件cnpmivue-lazyload-S 2、入口文件main... 查看详情

聊一聊前端图片懒加载背后的故事(代码片段)

本文内容什么是懒加载如何实现懒加载监听滚动事件IntersectionObserver浏览器原生方案本文小结相信大家已经注意到我博客有了一点变化，因为博主最近利用空闲时间对博客进行了优化。经过博主的不懈努力，首屏渲染时间... 查看详情

聊一聊前端图片懒加载背后的故事(代码片段)

js图片预加载插件

...个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定查看详情