PicLazyLoad implements delayed image loading (including background images ),

PicLazyLoad implements delayed image loading (including background images ),

As follows:

/*** PicLazyLoad: delays image loading, including background images ** $ (img ). picLazyLoad ({...}) * data-original: pre-loaded image address * Aaron */; (function ($) {$. fn. imgLazyLoad = function (settings) {var $ this = $ (this), _ winScrollTop = 0, _ winHeight = $ (window ). height (); settings = $. extend ({threshold: 0, // load the placeholder: 'Data: image/png; base64, signature + PB/aaffa0nnpuclaaaelftksuqmcc ', callback: function (){}}, settings | {}); // execute lazyLoadPic () for lazyLoadPic (); // rolling trigger for image change $ (window ). on ('scroll', function () {_ winScrollTop = document.doc umentElement. scrollTop | window. pageYOffset | document. body. scrollTop; lazyLoadPic () ;}); // lazyLoadPic () {$ this. each (function () {var $ self = $ (this); if ($ self. is ('img ') {if ($ self. attr ('data-original') {var _ offsetTop = $ self. offset (). top; if (_ offsetTop-settings. threshold) <= (_ winHeight + _ winScrollTop) {$ self. attr ('src', $ self. attr ('data-original'); $ self. removeAttr ('data-original'); $ self. removeClass ('loadh'); settings. callback ($ self) ;}}else {if ($ self. attr ('data-original') {// default placeholder image if($self.css ('background-image') = 'None') {$self.css ('background-image ', 'url ('+ settings. placeholder + ');} var _ offsetTop = $ self. offset (). top; if (_ offsetTop-settings. threshold) <= (_ winHeight + _ winScrollTop) {export self.css ('background-image', 'url ('+ $ self. attr ('data-original') + '); $ self. removeAttr ('data-original'); settings. callback ($ self) ;}}}) ;}} (Zepto );

Call

$('img').imgLazyLoad({callback:function(data){  })

The above picLazyLoad implements delayed image loading (including background images), which is all the content shared by Alibaba Cloud mini-editor. I hope you can give us a reference and provide more support to the customer center.