Videos lose their ratio with Lazy Load XT.
All videos, Youtube, Vimeo or videojs ect.
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.
]]>Hello!
I see that Lazy Load XT has not been updated for over a year now, and I was wondering if it will get any future updates and be maintained with new features, and most importantly new security updates.
Since many hack attacks rely on holes and vulnerabilities of plugins, using outdated plugins could be a a big risk for getting your site hacked.
Please let me know.
Thanks!
Hi,
I love this pluging BUT, it prevents my videos from loading so I had to deactivate it. Is there some way to disable just the video portion of Lazy Load XT?
Thanks!
]]>hey guys
finally I found this to be the plugin of choice when it come to lazy loading (and it causes no issues on my themes)
Actually the only need I have is to skip the jQuery library load (jquery.js or jquery.min.js).
how can I exclude them from lazy load?
thanks
Marco
Uncaught TypeError: $ is not a function?
at 49660769-1489694389.js:42
at 49660769-1489694389.js:314
I am also using this function to load the iframe on my post format. What filter do you recommend so that your plugin works?
/*
Iframe function loading
*/
function thirty_eight_get_embedded_media( $type = array() ){
$content = do_shortcode( apply_filters( ‘the_content’, get_the_content() ) );
$embed = get_media_embedded_in_content( $content, $type );
if( in_array( ‘audio’, $type ) ){
$output = str_replace( ‘?visual=true’, ‘?visual=false’, $embed[0] );
} else {
$output = $embed[0];
}
return $output;
}
echo thirty_eight_get_embedded_media( array( ‘video’, ‘iframe’) );
Thanks for the help
]]>My background images are never fading in because it looks like
.lazy-hidden {
opacity: 0;
}
is never removed. The weird thing is that the image flashes on and then disappears. My code inside the template is:
<section id="inner" data-bg="<?php the_post_thumbnail_url('large'); ?>" style="background: url('<?php echo $thumb['0'];?>');">
<div class="inner-intro">
<h1><?php the_title();?></h1>
<?php the_content();?>
</div><!--end inner intro-->
</section>
I do have backgrounds enabled in the plugin as well as post thumbnails. Any help is greatly appreciated. Thanks!
]]>When Lazy Load XT active, Pinterest Pin It Button don’t work for full size images. However for images in WP gallery it’s work! Partially Button work for some full size images when addon Enable script-based tagging active, but then lazy load function totally don’t work!
Theme Parabola, full size images output with Easy FancyBox.
Thank you for the help. Sorry me for my English! -)
I’m doing a WordPress RSS reader plugin and images who load from Shortcode do not lazy load, it seem that Lazy load XT do not lazy load these images that come from shortcodes.
https://www.ads-software.com/plugins/rss-feed-news-blocks-free/
Is Lazy Load XT compatible with page builders, or at least SiteOrigin Page Builder specifically? If not, is anyone familiar with adding support for this page builder?
Cheers.
]]>First of all, thank you so much for your work on this wonderful plugin. It’s by far the best lazy load plugin out there.
There’s just one problem I encountered. Using the latest version of WordPress and responsive images, Lazy Load XT generates the following markup:
<img class="alignnone size-full wp-image-3498" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://floffi.media/images/Movement.jpg" alt="Movement" width="855" height="570" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://floffi.media/images/Movement.jpg 855w, https://floffi.media/images/Movement-600x400.jpg 600w" sizes="(max-width: 855px) 100vw, 855px" />
First, there’s the duplicate src
attribute.
Second, the Nu Html Checker states that “the sizes
attribute may be specified only if the srcset
attribute is also present.” As far as I know, it should be enough to just replace sizes
with data-sizes
.
Thanks for looking into this.
]]>Hi
I’m trying to get XT working with master slider. When the slider appears there is just blank black slides. Any ideas how I can fix this? https://www.mindif.de/test/
Many thanks!
Scot
]]>Hi,
can you help me figure out why images are being loaded twice, videos too..
thanks!
]]>Hi there,
first of all, thanks for the great plugin. Looks really promising, I like the smooth fading effect especially. I got it to work on many parts of my site but unfortunately, the most important one, namely the blog content area, doesn’t work.
To style my posts, I’m using a plugin called Thrive Content Builder and I already contacted their support and this is what they said:
We don’t specifically support any lazy loading plugin and we’re aware of incompatibilities with some. TCB content is stored in post meta fields, so if the lazy load applies only to default wp content it wouldn’t work with TCB, I’m afraid for stability reasons there’s not much we can change on our end, the plugin would need to be able to handle lazy loading for TCB content too.
I can’t really make sense of your answer in the FAQ section with regards to the image filtering either. Where exactly do I have to change that code? I’m not nerd enough for this. ??
Appreciate any kind of help.
Cheers!
]]>Hi,
Thanks for the very helpful plugin! I could make it work for avatars, but couldn’t get it to work on post thumbnails. Most certainly I’m missing a class or something, could you please take a look on our dev server below with some post thumbnails below:
https://139.59.129.50/category/meb-sinavlari/
I’d be really glad if you could lend me a hand here. Thanks a lot!
]]>Hi,
I want to use a custom placeholder image. Can you please tell me how to use it.
]]>Hi,
For starters this is in my opinion the best and fastest lazy load of all of them.
I do however have a question concerning the lazy loading of images on mobile devices.
For some reason there is a “significant” time delay between the scroll and when the images appear.
This leads to when the user scrolls down, him seeing many product titles without images and only about 1/2 second later the product images appear. Is there a way to reduce this delay so that images appear immediately?
thanks
I am using a Genesis child theme, and I would like to lazy load background images, specifically for custom widgetized areas, but I’m having trouble understanding exactly how to do that.
I have read that I need to enable “Lazy Load background images”
and also add the attribute “data-bg” with a value of path to the image to elements with a background image.
However, I’m not sure exactly where to add the attribute and url for my custom widgetized areas.
These custom widgetized areas have been added via my functions.php file, for example:
// Our Process page: After Header Widget Area -jlr
genesis_register_sidebar( array(
'id' => 'custom-widget-process',
'name' => __( 'Custom Top Widget - Process', 'agency' ),
'description' => __( 'Custom Top Widget - Our Process page', 'agency' ),
) );
add_action( 'genesis_after_header', 'process_page_widget' );
function process_page_widget() {
if (is_page('our-process')) {
genesis_widget_area( 'custom-widget-process', array(
'before' => '<div class="custom-widget widget-area" id="top-section"><div class="wrap">',
'after' => '</div></div>',
) );
}
}
The background image is in my child theme’s images folder, and I have styled the custom widget to use the background image via the child theme style.css:
body.ourprocess-page div#top-section {background: url(images/widget-bg3.jpg) 50% no-repeat;}
I tried adding data-bg=”[my absolute path to bg image]” to the div in my functions.php file and then removing the background image from my stylesheet but that did not work – no bg image was loaded.
How can I get the bg image to lazy load using genesis?
Thanks in advance.
]]>This plugin seems to work the best with srcset, as it actually waits to load image.
But, it does have one catch. It seems to load two images for every image.
It loads the correct sized image placed in the post, but then it also loads the original/full size image. Not sure why. Here is the code before it appears in window:
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-src=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011-1024×576.jpg” alt=”Cowboys & Aliens (2011)” width=”1024″ height=”576″ class=”alignnone size-large wp-image-2191″ data-srcset=”https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011-1024×576.jpg 1024w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011-300×169.jpg 300w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011-768×432.jpg 768w, https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011.jpg 1440w” sizes=”(max-width: 1024px) 100vw, 1024px”>
This will load
https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011-1024×576.jpg
and
https://www.traileraddict.com/article/wp-content/uploads/2016/08/cowboys-aliens-2011.jpg
When lazy loads.
Can’t figure out why.
Cheers!
Ryan
Hi
I see the option to minimize css and js files but how about combining them? is it able to do that?
Hi,
I have the following problem: on posts/pages with multiple YouTube embeds the browser’s back-button (i.e. get back to previous site) breaks. As you scroll down, the plugin seems to create a “back-point” at every video player. So when you press the back-button in your browser it doesn’t bring you to the previous site. Instead, it will reset the YouTube embeds and make them disappear one by one.
You can get back to the previous site, by pressing the back button one time for every YouTube embed that was loaded. So if you scroll to the bottom of a post with 10 embeds you’d have to press back 11 times to actually get back to where you were before. This is very very bad for usability.
Is there a fix for this?
Especially anything using Mozilla Firefox seems to glitch out. I have tested with the following browsers/devices (tested on https://ressio.github.io/lazy-load-xt/demo/youtube-iframe.htm):
BROKEN WITH:
Windows 7 Home Premium 64-Bit: Google Chrome 51.0.2704.103, Internet Explorer 11.0.4, Firefox 47.0, TOR Browser
Windows 10 Enterprise 64-Bit: Google Chrome 51.0.2704.103, Firefox 47.0
Samsung Galaxy Tab A (Tablet): Google Chrome (latest version)
Samsung Galaxy S2 (Mobile): Google Chrome 43.0.2357.93 (Android 4.1.2)
WORKING WITH:
Windows 7 Home Premium 64-Bit: Safari 5.7.1, Opera 12.17
Windows 10 Enterprise 64-Bit: Safari 5.1.4
Samsung Galaxy S2 (Mobile): Default Android Browser (Android 4.1.2)
PlayStation 4
PlayStation Vita
Hi,
This plugin works great for me except that there appears to be an error/bug with the way the plugin outputs the srcset to the browser.
For example, I am using the following code to manually specify custom media queries for my images:
<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array(
'element' => 'img',
'sizes' => array('et-builder-portfolio-image', 'et-builder-portfolio-image@2x', 'Homepage-Laptop', 'Homepage-Laptop@2x', 'Homepage-Tablet-Landscape', 'Homepage-Tablet-Landscape@2x', 'Homepage-Tablet-Portrait', 'Homepage-Tablet-Portrait@2x', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Small-Landscape', 'Homepage-Smartphone-Large-Portrait', 'Homepage-Smartphone-Large-Portrait@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px">';
?>
</a>
When i inspect the image in chrome i get the following srcset:
<img data-srcset="https://localhost/wordpress/wp-content/uploads/2016/07/6-273x194.jpg 273w,
https://localhost/wordpress/wp-content/uploads/2016/07/6-285x203.jpg 285w, https://localhost/wordpress/wp-content/uploads/2016/07/6-322x229.jpg 322w, https://localhost/wordpress/wp-content/uploads/2016/07/6-354x252.jpg 354w, https://localhost/wordpress/wp-content/uploads/2016/07/6-400x284.jpg 400w, https://localhost/wordpress/wp-content/uploads/2016/07/6-496x352.jpg 496w, https://localhost/wordpress/wp-content/uploads/2016/07/6-546x388.jpg 546w, https://localhost/wordpress/wp-content/uploads/2016/07/6-570x406.jpg 570w, https://localhost/wordpress/wp-content/uploads/2016/07/6-585x415.jpg 585w, https://localhost/wordpress/wp-content/uploads/2016/07/6-644x458.jpg 644w, https://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg 676w, https://localhost/wordpress/wp-content/uploads/2016/07/6-708x504.jpg 708w, https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg 800w" sizes="(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px" src="https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded">
sizes="(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px" src="https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded">
As you can see by my media queries, i have specified an image with a width of 400px (400×284) to be displayed at a viewport of 1405+. But when i inspect the image in chrome it shows me 402×285 (the actual resolution i see on screen) and (natural 800×568).
The error is that the natural image is not the correct image i specified in my media query. It should be (natural 400×284) since that is the image size i specified for viewport 1405px+.
For some reason the plugin is selecting the wrong image size. I have tried using another lazy load plugin, and that plugin correctly reports the image as 402×285 (natural 400×284) when i inspect it in chrome. But i prefer your plugin so ideally would would like to use it instead but without this error.
Is there anything that can be done to output the srcset correctly so the correct image sizes are used for the “natural” image?
]]>Hi,
I really like your plugin, great work!
One thing, I’m unable to exclude a certain image class from being lazy loaded.
attachment-shop_thumbnail size-shop_thumbnail wp-post-image
I copied this class from the img and added it to the lazy load exception but it still runs lazy load on the images. do you have any idea?
It’s the class created for the preview images by woocommerce cart tab when a product is within the cart.
thanks
]]>Hello!
I have a problem that I’ve been trying to troubleshoot and not having any luck.
I have an Envira Gallery inserted on a page and have done some custom CSS so that only the first image in the gallery is shown on the page. Clicking on the image opens an overlay where someone can see all the images in the gallery, with thumbnails at the bottom.
The problem: Lazy Load XT causes all the images in the gallery to load within the page, rather than just showing the first one.
I had all the Lazy Load options enabled (videos, responsive images, thumbnails, gravatars, etc) until I noticed the problem. I then disabled everything other than the “Lazy load YouTube and Vimeo videos, iframes, audio, etc. “, however the issue is still occurring. I’ve cleared my browser cache, tested in a few browsers and all exhibit the same problem.
Next I tried adding ‘envira-gallery-image envira-gallery-link envira-gallery-item-inner’ into the ‘skip lazy loading on these classes’ but, again, the problem still occurs.
I can’t show you the site publicly, but could get you info on how to view it if we can find a non-public method of doing so.
Thanks!
]]>Hi Mate, amazing plugin, just wondering if it works with WordPress galleries, Im working on a custom theme based on UNDERSCORES and doesnt seem to be doing the trick.
]]>Hello,
I bought a pro plugin for Vimeo display… this helped my site a lot the Vimeo fast load. Wanted to donate. When I move to donate… I’ve already bought what I need in the moment… and donate is in my plugin purchase acct.
I’d feel awful paying for a pro vimeo plugin… getting the full benefit of it via a free plugin… and not supporting the plugin author who made my site work great.
Just $10, but wanted to donate.
Thanks.
]]>I have tried everything I can, however it shows the images blank. If I use another template, it works, but my custom one is not working and I don’t know why.
Looking to the code, I see that the img src stays with the URI Image, and does not change to the actual img src. I have looked and tried lots of different solutions, but nothing changes. I was thinking maybe can be something related to functions.php?
<img width=”1177″ height=”1281″ src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-src=”https://localhost:8888/carolina-silva/wordpress/wp-content/uploads/2016/06/calaca.png” class=”attachment-post-thumbnail size-post-thumbnail wp-post-image” alt=”calaca” data-srcset=”https://localhost:8888/carolina-silva/wordpress/wp-content/uploads/2016/06/calaca.png 1177w, https://localhost:8888/carolina-silva/wordpress/wp-content/uploads/2016/06/calaca-276×300.png 276w, https://localhost:8888/carolina-silva/wordpress/wp-content/uploads/2016/06/calaca-768×836.png 768w, https://localhost:8888/carolina-silva/wordpress/wp-content/uploads/2016/06/calaca-941×1024.png 941w” sizes=”(max-width: 1177px) 100vw, 1177px”>
Looking forward to your response, thank you!
]]>Hi
My site use infinite scroll.
After 20 posts load, I scroll to bottom and next 20 posts load.
When new 20 post load, the plugin need to restart with callback function.
As a sample code, I code like below
How do i reload the lazyload??
$container.infinitescroll({
navSelector : ‘#page_nav’,
nextSelector : ‘#page_nav a’,
blah blah~
},
function( newElements ) {
/********script reload need ******/
}
);
Is is possible to activate/deactivate on specific pages by id or by post type?
Kind regards
]]>Hi,
I’m unable to lazy load the background images I have manually inserted using HTML inside the php files (for example, page.php).
Something like:
<div class="lazy" data-bg="https://localhost/wordpress/wp-content/uploads/2016/05/00610_peace_2560x1600.jpg" >
</div>
Am I missing something? Do I need styling with the background-image and url in this case? How do I lazy load this?
Thanks!
]]>