En este artículo, aprenderemos a diseñar la carga de imágenes o videos para aplicaciones orientadas a dispositivos móviles utilizando el complemento jQuery Lazy Load XT.
Requisito previo: descargue los archivos de biblioteca requeridos precompilados desde el enlace y guárdelos en su carpeta de trabajo para la siguiente implementación.
Ejemplo 1: El siguiente ejemplo demuestra la carga ajax de imágenes usando HTML y el complemento jQuery anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"/>
<link href="bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>
<script>
$(window).on("ajaxComplete", function () {
setTimeout(function () {
$(window).lazyLoadXT();
}, 50);
});
</script>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<p class="lead">Images loading using AJAX</p>
</div>
<p>
<a class="btn btn-primary btn-lg"
role="button"
href="#"
onclick="$('#divID').load('myajax.htm #divID');
return false;">
Reload
</a>
</p>
<div id="divID">
<p><img data-src="images/geeksimage1.PNG"
width="400" height="265" />
</p>
<p><img data-src="images/gfg2.JPG"
width="400" height="265" />
</p>
<p><img data-src="images/gfg4.JPG"
width="400" height="265" />
</p>
<p><img data-src="images/gfg6.PNG"
width="400" height="265" />
</p>
<p><img data-src="images/background2.JPG"
width="400" height="265" />
</p>
<p><img data-src="images/background3.JPG"
width="400" height="265" />
</p>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el desplazamiento infinito de la lista de imágenes usando el complemento.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Infinite scroll</title>
<meta name="viewport"
content=" width=device-width, initial-scale=1.0"/>
<link href="bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>
<style>
#marker-end {
height: 30px;
background: url(images/loading.gif) no-repeat 50% 50%;
}
</style>
<script>
$(document).ready(function () {
if (!$.lazyLoadXT.forceLoad) {
$("#marker-end")
.on("lazyshow", function () {
$.ajax({
url: "myinfinite.htm",
dataType: "html",
}).done(function (responseText) {
// Add new elements
$("#divID").append($("<div>").append($.parseHTML(responseText))
.find("#infinite").children());
// Process added elements
$(window).lazyLoadXT();
$("#marker-end").lazyLoadXT({
visibleOnly: false,
checkDuplicates: false,
});
});
})
.lazyLoadXT({ visibleOnly: false });
}
});
</script>
</head>
<body>
<div class="container">
<div class="page-header">
<p class="lead">Infinite scrolling.</p>
</div>
<div id="divID">
<p><img data-src="images/geeksimage1.PNG"
width="400" height="265" /></p>
<p><img data-src="images/gfg2.JPG"
width="400" height="265" /></p>
<p><img data-src="images/gfg4.JPG"
width="400" height="265" /></p>
<p><img data-src="images/gfg6.PNG"
width="400" height="265" /></p>
<p><img data-src="images/background2.JPG"
width="400" height="265" /></p>
<p><img data-src="images/background3.JPG"
width="400" height="265" /></p>
</div>
<div id="marker-end"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA