Background-image lazy-load is not working
-
Hi,
Background-images are being loaded but not lazy-loaded and besides it will not display some elements.
<div class="rowItem col-md-3 col-sm-6 col-ms-12 btTextCenter animate animate-fadein animate-moveup btMiddleVertical btTextIndent wBackground cover animated" style="background-image: url(https://res.cloudinary.com/journey-tamarindo/image/upload/q_auto:eco,dpr_auto,f_auto/v1547574778/Kids-club-box-1_lkanf0_d7qvmi.png);background-color: rgba(73, 213, 116, 1); " data-bg="https://res.cloudinary.com/journey-tamarindo/image/upload/q_auto:eco,dpr_auto,f_auto/v1547574778/Kids-club-box-1_lkanf0_d7qvmi.png" data-width="3"><div class="rowItemContent"><div class="btClear btSeparator topSpaced bottomLargeSpaced noBorder"><hr></div><header class="header btClear extralarge"><div class="dash"><h1><span class="headline">EXPLORE</span></h1></div></header><div class="btClear btSeparator bottomSemiSpaced border"><hr></div><div class="btText"></div><div class="btClear btSeparator topSmallSpaced bottomSemiSpaced noBorder"><hr></div><a href="https://www.journeytamarindo.com/about/lesson-plan/" class="btBtn btBtn btnFilledStyle btndefaultColor btnMedium btnNormalWidth btnRightPosition btnNoIcon"><span class="btnInnerText">FIND OUT MORE</span></a><div class="btClear btSeparator bottomSpaced noBorder"><hr></div></div></div>
For section tags the whole element and its children won’t display
<section id="bt_section5c49ee00da782" class="boldSection topSemiSpaced bottomLargeSpaced gutter inherit wBackground cover" style="background-image:url('https://res.cloudinary.com/journey-tamarindo/image/upload/q_auto:eco,dpr_auto,f_auto/v1547574783/Kids-club-background-08_btsuvd_fijuyw.jpg');" data-bg="https://res.cloudinary.com/journey-tamarindo/image/upload/q_auto:eco,dpr_auto,f_auto/v1547574783/Kids-club-background-08_btsuvd_fijuyw.jpg"><div class="port"><div class="boldCell"><div class="boldCellInner"><div class="boldRow "><div class="boldRowInner"><div class="rowItem col-md-12 col-ms-12 btTextCenter animate animate-fadein inherit animated" data-width="12"><div class="rowItemContent"><header class="header btClear extralarge btHeaderAccent2"><div class="dash"><h1><span class="headline">OUR BLOG</span></h1></div><div class="btSubTitle">CHECK OUT OUR LATEST NEWS!</div></header><div class="servicesItem btServicesAccent2 btIcoBigSizeIcon "><div class="sIcon"><span class="btIco btIcoBigSize btIcoDefaultType btAccent2Icon"><span data-ico-of="?" class="btIcoHolder"></span></span></div></div></div></div></div></div><div class="boldRow "><div class="boldRowInner"><div class="rowItem col-md-12 col-ms-12 btTextLeft" data-width="12"><div class="rowItemContent"><div class="btLatestPostsContainer horizontalPosts "> <div class="btSingleLatestPost col-sm-6 col-ms-12 inherit"><div class="btSingleLatestPostImage btTextCenter"><div class="bpgPhoto "> <a href="https://www.journeytamarindo.com/2018/07/09/journeyourdog/" target="_self" title=""></a> <div class="boldPhotoBox"><div class="bpbItem"><div class="btImage"><img src="https://res.cloudinary.com/journey-tamarindo/image/upload/q_auto:eco,dpr_auto,f_auto,w_auto/v1547574881/PHOTO-2018-07-06-20-49-36_vcfdmy_uviyi2.jpg" alt="" title=""></div></div></div> <div class="captionPane btDarkSkin btTextCenter"> <div class="captionTable"> <div class="captionCell"> <div class="captionTxt"></div> </div> </div> </div></div></div><div class="btSingleLatestPostContent"> <header class="header btClear small"><div class="dash"><h4><span class="headline"><a href="https://www.journeytamarindo.com/2018/07/09/journeyourdog/" target="_self">Journey, Our Best Team Member!</a></span></h4></div><div class="btSubTitle"><span class="btArticleDate">July 9, 2018</span><a href="https://www.journeytamarindo.com/author/journey_tamarindo_admin/" class="btArticleAuthor">by Eri Bm</a></div></header> <p class="btLatestPostContent"></p> </div> </div> <div class="btSingleLatestPost col-sm-6 col-ms-12 inherit"><div class="btSingleLatestPostImage btTextCenter"><div class="bpgPhoto "> <a href="https://www.journeytamarindo.com/2018/07/09/joinjourneytamarindo/" target="_self" title=""></a> <div class="boldPhotoBox"><div class="bpbItem"><div class="btImage"><img src="https://res.cloudinary.com/journey-tamarindo/image/upload/v1547574881/Screen-Shot-2018-07-09-at-4.38.05-PM_pq8el5_c5ql3i.png" alt="" title=""></div></div></div> <div class="captionPane btDarkSkin btTextCenter"> <div class="captionTable"> <div class="captionCell"> <div class="captionTxt"></div> </div> </div> </div></div></div><div class="btSingleLatestPostContent"> <header class="header btClear small"><div class="dash"><h4><span class="headline"><a href="https://www.journeytamarindo.com/2018/07/09/joinjourneytamarindo/" target="_self">Enrollment Now Open!</a></span></h4></div><div class="btSubTitle"><span class="btArticleDate">July 9, 2018</span><a href="https://www.journeytamarindo.com/author/journey_tamarindo_admin/" class="btArticleAuthor">by Eri Bm</a></div></header> <p class="btLatestPostContent"></p> </div> </div></div></div></div></div></div></div></div></div></section>
I left ‘lazy-load background image’ option disabled.
The page I need help with: [log in to see the link]
- The topic ‘Background-image lazy-load is not working’ is closed to new replies.