副标题----为什么写这个react插件图片懒加载是项目中常用的功能，但是现有的react懒加载组件库用起来不是很爽？。总结起来有以下几点：没有只针对图片的懒加载组件。大多数组件库都内置了模块、组件、脚本、iframe的懒加载功能，同时弱化了图片的懒加载功能。不支持动画显示效果。不灵活且可配置性不高。占位符不能被组件化。不支持响应图像(picture/srcset)。react-lazyimg-component知道你想要什么样的组件，所以你可以自己做吗？。于是乎，react-lazyimg-component诞生了。先来看看它的效果：singsong：有时间的话还是鼓励大家自己实现一些小插件。PC预览：戳这里手机预览（扫一扫）：需要用到的时候1.小巧轻便，简单易用，基本没有学习成本在那个jQuery一统天下的时代，你可以用jQuery来写代码。其中jQuery.lazyload是一个非常常用的图片懒加载插件。可能很多朋友和我一样，懒加载直接上jQuery.lazyload就可以了，已经习惯使用jQuery.lazyload了。于是想能不能继承jQuery.lazyload的使用方式，同时保持react特有的组件特性。这样可以快速上手~?singsong:这个只是继承了jQuery.lazyload的配置特性，并不是完全继承。毕竟jQuery和现在主流的MVVM框架是完全不同的。如果你们熟悉jQuery.lazyload，您可以直接开始使用react-lazyimg-component，无需学习成本。只是说话不是写作，但它不是鸡蛋。那我们看看好不好用：install//npm$>npminstallreact-lazyimg-component//yarn$>yarnaddreact-lazyimg-componentuse//introduceimportLazyimg,{withLazyimg}from'react-lazyimg-组件';//调用;是不是很简单，有没有。以上只是使用react-lazyimg-component的默认配置。这里我们可以通过配置项来自定义延迟加载的行为：import'velocity-animate/velocity.ui';//configureconstconfig={threshold:100,//指定触发阈值js_effect:'transition.fadeIn',//支持velocity.js动画效果};//生成对应的Lazy基于配置项的组件constLazy=withLazyimg(config);//调用;再来看看react-lazyimg-组件就是那些配置项：threshold:0,//指定离底部的距离触发加载事件:'scroll',//指定触发事件，默认为'scroll'js_effect:undefined,//显示图片的js动画效果css_effect:undefined,//显示图片的css动画效果container:window,//指定容器，默认为windowparent:undefined,//可以指定父级element动画效果应用到元素上null,//图片加载出错时触发错误钩子函数node_type:'img',//指定生成的节点类型，默认为'img'placeholder：//占位符元素，除了支持普通图片，也支持reactcomp内容。'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',是不是很眼熟?，如果你熟悉jquery.lazyload，那么你只需了解如下几个配置项即可：js_effect:指定元素显示的动画效果,basedonvelocity.jsanimationimplementation.Velocity.jsneedstobeloadedbeforeuse.css_effect:Specifytheanimationeffectdisplayedbytheelement,basedonanimate.cssanimation.Animate.cssneedstobeinstalledbeforeuse.parent:Usedtospecifywhichparentelementtheanimationeffectactson.Possiblevalues:selectoroftheparentelementselector(string)parentlevellevel(integer)node_type:Specifiestheelementtypethatreactwillgenerate,defaultis'img'.placeholder:Aplaceholderelement,inadditiontosupportingordinaryimages,italsosupportsreactcomponents.2.Supportvelocity.js,animate.cssanimationeffectlibraries,andcustomanimationeffects.Italsosupportsanimationeffectsactingonparentelements.Specifythejs-effectconfigurationitemtoconfigurethevelocity.jsanimationeffectNote:js-effectdependsonvelocity.js.Needtomakesurevelocity.jsisloaded.//ImportlazyimgimportLazyimg,{withLazyimg}from'react-lazyimg-component';//导入volecity.jsimport'velocity-animate';import'velocity-animate/velocity.ui';//配置constconfig={placeholder:'loading.svg',js_effect:'transition.fadeIn',//支持velocity.js动画效果};constLazy=withLazyimg(config);//调用;直接应用效果？指定css-effect配置项来配置animate.css的动画效果注意：css-effect依赖于animate.css。需要确保安装了animate.css。//配置constconfig={js_effect="transition.flipXIn"//不会生效css_effect={['animated','rollIn']}//自定义css动画效果};constLazy=withLazyimg(配置);//调用;直接作用？Specifytheparent配置项指定父元素singsong的动画效果：为什么懒加载的动画效果只作用于目标元素，并且在特定条件下，目标元素的父元素会有意想不到的效果？//指定作用于父元素的动画效果
