search

dkern / jquery.lazy

A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
http://jquery.eisbehr.de/lazy
Other
1.02k stars 236 forks source link

Lazy loading not loading image in the slider #212

Closed rnk30 closed 5 years ago

rnk30 commented 5 years ago

Hi,

I am trying to implement lazy loading with slider (slider link : https://www.jqueryscript.net/slider/Flexible-Responsive-jQuery-Image-Slider-Plugin-Simple-Slider.html) but with no luck.Request you to share the code in jfiddle.Following is the code which i have written

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<center>
<link rel="stylesheet" href="../css/slider9.min.css">
<link id="Link4" type="text/css" rel="stylesheet" href="../css/jquery-ui.min.css" />
<!--Start You can place the slider code here-->
<img class="lazy" data-src="../hp/slider3.jpg" />
<div class="slider-container lazy-caption" id="caption-slide">
<div class="slider">
<!--edit starts-->
<!--PROMO-->
<div class="slider__item">
<a href="../osc-registration.aspx?regsrc=3729&email={{email}}&utm_source=HP&utm_medium=w-HP&utm_campaign=one-stock&utm_term=web" target="_blank">
<picture>
<source srcset="../images/hp/08162019-crorepati-hp.webp" type="image/webp" class="lazy-load" media="(max-width: 998px)">
<source srcset="../images/hp/08162019-crorepati-hp.webp" type="image/webp" class="lazy-load" media="(min-width: 998px)">
<img data-lazyload="../images/hp/08162019-crorepati-hp.jpg" data-src="../images/hp/08162019-crorepati-hp.jpg" srcset="../images/hp/08162019-crorepati-hp.jpg 360w, ../images/hp/08162019-crorepati-hp.jpg 500w" alt="" class="lazy-load" style="width: 1020px;" width="998">
</picture>
</a>
</div>
<!--TM-->
<div class="slider__item">
<a href="../indian-share-markets/08/19/2019/Sensex-Rises-300-Points-Capital-Goods--Healthcare-Stocks-Lead&utm_source=HP-slider&utm_medium=w-HP&utm_campaign=TM&utm_term=web">
<picture
class="lazy"
data-src="../images/hp/08192019-tm-1230-hp.jpg"
data-srcset="../images/hp/08192019-tm-1230-hp.webp"
data-media="(min-width: 998px)"
data-type="image/webp">
</picture>
<span class="slider__caption">Rises 300 Points; Capital Goods & Healthcare Stocks Lead<div>Posted by Monish , | August 19, 2019 | Today's Market</div></span>
</a>
</div>
<!--edit ends-->
</div>
<div class="switch" id="prev"><span></span></div>
<div class="switch" id="next"><span></span></div>
</div>
</center>
<script id="Script1" type="text/javascript" src="/js/jquery.1.11.min.js"></script>
<script id="Script2" type="text/javascript" src="/js/jquery-ui-opt.min.js"></script>
<script language="javascript" type="text/javascript" src="//js/top-slider2.min.js"></script>
<script type="text/javascript" src="//js/lazyload/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//js/lazyload/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#caption-slide").sliderUi({
caption: true,
delay: 8000,
speed: 500
});
var lazyMain = $('.lazy').lazy({
visibleOnly: true,
effect: "fadeIn",
effectTime: 1,
threshold: 0,
chainable: false
})
});
</script>
</body>
</html>
dkern commented 5 years ago

Sorry, I can't support or help with any library out there. You have to implement it on it's own. It is possible, you basically need to call the Lazy public function on your own, like when the slider is changed.

rnk30 commented 5 years ago

Can you share any example link which I can follow to make my slider work lazy as i am a beginner programmer. You have created excellent library for lazy loading of content on the web page.Good job :) Thnx