Prefacio
Recientemente, estoy un poco ocupado. Pero todos los días hay un récord, cómo puedo decir, todos los días hay una cosecha. Puedes saberlo mirando mi tiempo de lanzamiento, básicamente varios lanzamientos al día. Sí ... solo paso un día de la semana clasificando los puntos de conocimiento y los registros que he dominado en una semana. ¡Bien, entonces estamos en el tema!
En los últimos días, hablé con el director técnico sobre la carga de transmisión y la carga diferida. Todo el mundo sabe que cuando la cantidad de datos es particularmente grande, para no afectar la velocidad de carga de la página. Generalmente, se usa la paginación. Si usa el método de paginación, habrá botones para la página anterior y la página siguiente. Después de navegar por el primer lote de datos, si desea ver los siguientes datos, simplemente haga clic en el botón de la página siguiente, pero después de leer la segunda página, si desea ver la segunda página, debe hacer clic en el botón de la página anterior nuevamente ... Sin mencionar que todavía hay gente perezosa. Para mejorar la sensación de experiencia del usuario, lo fácil que es venir, entonces la carga de transmisión está aquí.
Mientras el mouse siga deslizándose hacia abajo, después de que se muestre el primer lote de datos, se mostrará el segundo lote de datos ... y así sucesivamente hasta que se muestren los datos. Tengo que decir que es muy conveniente, siempre deslizándose, siempre deslizándose, es un poco como deslizar rápido , y como un vibrato jaja.
Ideas
Después de pensarlo, no parece difícil darse cuenta. Hay muchos componentes y marcos listos para usar en Baidu en línea. Pero no quiero ser un programador guerrero de CV. Vale la pena aprender los principios internos. Probablemente lo resolví, pero no es difícil. Así que hice un ejemplo sencillo.
(1) La altura mostrada en cada línea de la etiqueta
(2) Escuche el evento de monitoreo de la barra de desplazamiento
(3) Establezca un valor para determinar si se cumplen las condiciones y luego cargue el siguiente lote de datos
Lograr efecto
Transmisión de imágenes o datos en páginas web
Código Js principal
<script>
$(function () {
$(".container").scroll(function () {
//开始监听滚动条
scrollLoad.scrollChack();
});
var scrollLoad={
//模拟数据
photo_arr:["/images/i1.png","/images/i2.png","/images/i3.png","/images/i4.png"],
//滚动检查，滚动条的高度，是否符合条件
scrollChack:()=>{
//获取当前所有行中最后一行的eq索引
var $treqIndex=$("#tableScroll tr").length-1;
//获取当前所有行中最后一行的offsetTop坐标
var curr_top =$("#tableScroll tr").eq($treqIndex).offset().top;
//用于记录当前offsetTOP 【大家可以在web页面上将滚动条滑到底，根据这个值判断，取多少值合适】
$("#curToptips").text(curr_top);
//一列照片的height是180px ,初始行有4行,180*2=360px;+<h1>滚动条加载</h1>标签的高度大约477.5px
//也就是当，当前高度小于385的时候就是到底了，那么这个时候就可以加载下一批图片了
if(curr_top<478)
{
//生成正在“加载中……”的提示标签
scrollLoad.GenLoadGIFtr();
//设置时间2.5s后生成下一批数据
setTimeout(scrollLoad.GentrAndtd,2500);
}
}
,
//生成正在“加载中……”的提示标签,并给他一个id标识，用于生成下一批数据之后清除它
GenLoadGIFtr:()=>{
let html='<tr id="load_gif"> <td colspan="6"><img class="Load-img" src="/images/Load1.gif"/><i>正在加载中……</i></td></tr>';
$("#tableScroll").append(html);
}
,
//生成下一批数据图片
GentrAndtd:()=>{
let html = "<tr>";
for (let i = 0; i < scrollLoad.photo_arr.length; i++) {
for (let j = 0; j < 6; j++) {
html += ' <td><img src="' + scrollLoad.photo_arr[i] + '" /></td>';
}
html += "</tr>";
}
//删除加载中，标签
$("#load_gif").remove();
$("#tableScroll").append(html);
}
}
})
</script>
Por supuesto, si quieres ser un ejemplo y no te disgusta mi código, ¡puedes usarme para probarlo! Publico css, código html
estilo CSS
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式加载</title>
<style>
.container{
width: 50%;
position: absolute;
margin-left: -25%;
left: 50%;
height: 580px;
overflow-y: scroll;
background: rgb(240,240,240);
}
table{
width: 100%;
}
table td img{
width: 100px;height: 180px;
}
.Load-img{
margin-left: 40%;
margin-right: 30px;
display: inline-block;width: 20px;height: 20px;
}
table td i{
font-weight: 700;
font-size: 20px;
display:inline-block ;
}
</style>
<script src="/Jqmin.js"></script>
</head>
elemento de etiqueta corporal
<body>
<h1>当前offset:<span id="curToptips"></span></h1>
<div class="container"> <h1>滚动加载</h1>
<table id="tableScroll">
<tr>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
</tr>
<tr>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
</tr>
<tr>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
</tr>
<tr>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
</tr>
</table>
</div>
</body>
Bueno, eso es básicamente todo, pero en realidad no es difícil. Por supuesto, esto es solo un ejemplo. Por ejemplo, si quieres poner un botón para cargar más debajo, el principio es el mismo, pero se cambia la condición de disparo.
Si se va a combinar con el back-end, el principio es el mismo. También es equivalente a una función de paginación. Establezca el valor de una variable pública en 1 y luego agregue esta variable cada vez que se deslice a una cierta altura; use esta variable para solicitar datos del servidor y luego agréguela de forma asincrónica. Entonces, no importa cómo lo cambie, siempre que se conozca el principio, es mucho más fácil hacer inferencias entre sí.