Post by web_2012 » Fri May 24, 2019 4:11 pm

Hi,
ich nutze den Nivo Slider auf der Startseite (außerhalb des sichtbaren Bereichs).
Leider lädt er die Bilder schon vorher rein, was die Ladezeit deutlich erhöht. Ich würde es gerne so haben, dass es die Bilder erst lädt, wenn ich weiter nach unten scrolle.

Ich habe für Bilder bereits ein Javascript im Header integriert (lazysizes.js), was auch sehr gut klappt. Dazu mussten dann nur die "src" Attribute aus dem img-Tag in data-src sowie die class "lazyload" zugewiesen werden.

Leider funktioniert das beim Nivo Slider nicht so einfach.
Hier mal der Code:

Code: Select all

<div class="banner7 hidden-xs">
	<div class= "oc-banner7-container">
		<div class="flexslider oc-nivoslider">
			<div class="oc-loading"></div>
			<div id="oc-inivoslider" class="slides">

				<?php
					$slides = $ocslideshows;
					$config = $slide_setting[0];

					$i = 1;
					foreach($slides as $s) {

				?>
				<img style="display: none;" src="<?php echo $s['image']; ?>" alt="" title="#banner7-caption<?php echo $i; ?>"  />
				<?php
					$i ++;
			        }
				?>
			</div>

			<?php
				$i = 1;
				foreach($slides as $s) {
					if($s['type']==1){
				?>
					<div id="banner7-caption<?php echo $i; ?>" class="banner7-caption nivo-html-caption nivo-caption">
						<div class="timeloading timeloading1" style="animation: <?php echo $config['delay'].'ms';?> ease-in-out 0s normal none 1 running timeloading;"></div>
						<div class="banner7-content slider-1">
						<?php if($s['title']) { ?>
							<div class="text-content">
								<?php if($s['title']) { ?>
									<h1 class="title1"><span><?php echo $s['title']; ?></span></h1>
								<?php } ?>
								<?php if($s['sub_title']) { ?>
									<h2 class="sub-title"><span><?php echo $s['sub_title']; ?></span></h2>
								<?php } ?>
								<?php if($s['description']) { ?>
								<div class="banner7-des">
									<span><?php echo $s['description']; ?></span>
								</div>
								<?php } ?>
								<?php if( $s['link'] ) { ?>
									<div class="banner7-readmore">
										<a href="<?php echo $s['link']?>" title="<?php echo 'Jetzt entdecken' ?>"><?php echo 'Jetzt entdecken'; ?></a>
									</div>
								<?php } ?>
							</div>
						<?php } ?>
							<!-- <?php if($s['small_image']) { ?>
								<img class="img1" src="<?php echo $s['small_image']; ?>" alt="" title="#banner7-caption<?php echo $i; ?>"  />
							<?php } ?> -->
						</div>

					</div>
				<?php
					}
					if($s['type']==2){
				?>
					<div id="banner7-caption<?php echo $i; ?>" class="banner7-caption nivo-html-caption nivo-caption">
						<div class="timeloading timeloading2" style="animation: <?php echo $config['delay'].'ms';?> ease-in-out 0s normal none 1 running timeloading;"></div>
						<div class="banner7-content slider-2">
						<?php if($s['title']) { ?>
							<div class="text-content">
								<?php if($s['title']) { ?>
									<h1 class="title1"><span><?php echo $s['title']; ?></span></h1>
								<?php } ?>
								<?php if($s['sub_title']) { ?>
									<h2 class="sub-title"><span><?php echo $s['sub_title']; ?></span></h2>
								<?php } ?>
								<?php if($s['description']) { ?>
								<div class="banner7-des">
									<span><?php echo $s['description']; ?></span>
								</div>
								<?php } ?>
								<?php if( $s['link'] ) { ?>
									<div class="banner7-readmore">
										<a href="<?php echo $s['link']?>" title="<?php echo 'Jetzt entdecken' ?>"><?php echo 'Jetzt entdecken'; ?></a>
									</div>
								<?php } ?>
							</div>
						<?php } ?>
						</div>

					</div>
				<?php
					}
					if($s['type']==3){
				?>

					<div id="banner7-caption<?php echo $i; ?>" class="banner7-caption nivo-html-caption nivo-caption">
						<div class="timeloading timeloading3" style="animation: <?php echo $config['delay'].'ms';?> ease-in-out 0s normal none 1 running timeloading;"></div>
						<div class="banner7-content slider-3">
						<?php if($s['title']) { ?>
							<div class="text-content">
								<?php if($s['title']) { ?>
									<h1 class="title1"><span><?php echo $s['title']; ?></span></h1>
								<?php } ?>
								<?php if($s['sub_title']) { ?>
									<h2 class="sub-title"><span><?php echo $s['sub_title']; ?></span></h2>
								<?php } ?>
								<?php if($s['description']) { ?>
								<div class="banner7-des">
									<span><?php echo $s['description']; ?></span>
								</div>
								<?php } ?>
								<?php if( $s['link'] ) { ?>


									<div class="banner7-readmore">
										<a href="<?php echo $s['link']?>" title="<?php echo 'Jetzt entdecken' ?>"><?php echo 'Jetzt entdecken'; ?></a>
									</div>

								<?php } ?>

							</div>
						<?php } ?>
						</div>
					</div>

				<?php
					}
				$i++;
				}
				?>
			<script type="text/javascript">
				$(window).load(function() {
					$('#oc-inivoslider').nivoSlider({
						effect: '<?php if($config['effect']) { echo $config['effect'];} else { echo 'random'; } ?>',
						slices: 15,
						boxCols: 8,
						boxRows: 4,
						manualAdvance: <?php  if(isset($config['auto'])&& $config['auto'] == 1) { echo 'false' ; } else { echo 'true';} ?>,
						animSpeed:500,
						pauseTime: '<?php  if($config['delay']) { echo $config['delay']; } else { echo 3000;} ?>',
						startSlide: 0,
						controlNav:  <?php  if(isset($config['contrl']) && $config['contrl'] == 1) { echo 'true' ; } else { echo 'false';} ?>,
					directionNav:  <?php  if(isset($config['nextback'])&& $config['nextback'] == 1) { echo 'true' ; } else { echo 'false';} ?>,
					controlNavThumbs: false,
							pauseOnHover:  <?php  if(isset($config['hover'])&& $config['hover'] == 1) { echo 'true' ; } else { echo 'false';} ?>,
							prevText: 'Prev',
							nextText: 'Next',
							beforeChange: function() {
						var nivo_image = $('#oc-inivoslider .nivo-caption .banner7-small_image img').attr('src');
						$('#oc-inivoslider .nivo-caption').hide();
						$('.move-slides-effect img').each(function() {
							var small_image = $(this).attr('src');
							if(nivo_image == small_image) {
								var move_class = $(this).closest('.move-slides-effect').data('class');
								$('#oc-inivoslider .nivo-caption').removeClass().addClass('nivo-caption').addClass(move_class);
							}
						});
					},
					afterLoad: function(){
						$('.oc-loading').css("display","none");
						var nivo_image = $('.nivo-caption .banner7-small_image img').attr('src');
						$('.move-slides-effect img').each(function() {
							var small_image = $(this).attr('src');
							if(nivo_image == small_image) {
								var move_class = $(this).closest('.move-slides-effect').data('class');
								$('#oc-inivoslider .nivo-caption').removeClass().addClass('nivo-caption').addClass(move_class);
							}
						});
					},

				});
				});

			</script>
		</div>
	</div>
</div>
Wie kann ich erreichen, dass die Bannerbilder erst laden, wenn ich weiter nach unten scrolle?

Gruß

Newbie

Posts

Joined
Thu Aug 02, 2012 2:58 pm

Post by IP_CAM » Mon May 27, 2019 9:24 am

Uch habe zwar keine Ahnung, welche genau so funzt, aber es existiert
eine ganze Reihe solcher Erweiterungen für sowas, auch kostenlos, je
nach dem, welche OC Version man benutzt. Wenn aber sowas eine Seite
spürbar verlangsamt, sind es wohl nicht nur die Bilder allein ... ::)
Ernst
https://www.opencart.com/index.php?rout ... azy%20load

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 5 guests