백엔드 개발 PHP 튜토리얼 异步加载技术实现当滚动条到最底部的瀑布流效果_PHP

异步加载技术实现当滚动条到最底部的瀑布流效果_PHP

May 31, 2016 pm 07:30 PM
비동기 로딩 폭포 흐름

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空。

滚动条事件要写在window.onscroll中才有效判断。如下:

window.onscroll=function(){<br>    
// var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); //获取滚动条的位置
var sctop = $(document).height()-$(window).height();
var id = $("#ajax_claid").val();
if(!id){
id=8;
}
$("#ajax_p").val(tops);
if(tops>=sctop)//成立说明滚动条已在最底部
{
var b=$("#ajax_p").val();
if(b>a){
page=page+1;//传递页码
}
var Url = "aja_pro/"+id+"/"+page;//程序页面,查询信息返回数据,直接返回带html的信息。

$.get(Url,function(data){
$("#aja_jia").append(data);
});

}
};
로그인 후 복사

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Ajax 예외 노출 및 오류 해결 방법 목록 Ajax 예외 노출 및 오류 해결 방법 목록 Jan 30, 2024 am 08:33 AM

Ajax 이상 현상의 비밀이 밝혀진다. 다양한 오류를 처리하려면 구체적인 코드 예제가 필요하다. 2019년에는 프론트엔드 개발이 인터넷 업계에서 무시할 수 없는 중요한 위치가 되었다. 프론트엔드 개발에서 가장 일반적으로 사용되는 기술 중 하나인 Ajax는 비동기 페이지 로딩과 데이터 상호작용을 실현할 수 있으며 그 중요성은 자명합니다. 그러나 Ajax 기술을 사용할 때 다양한 오류와 예외가 자주 발생합니다. 이러한 오류를 처리하는 방법은 모든 프런트엔드 개발자가 직면해야 하는 문제입니다. 1. 네트워크 오류 Ajax를 사용하여 요청을 보낼 때 가장 일반적인 오류는 다음과 같습니다.

jQuery .val()이 작동하지 않는 상황을 효과적으로 처리합니다. jQuery .val()이 작동하지 않는 상황을 효과적으로 처리합니다. Feb 20, 2024 pm 09:36 PM

제목: jQuery.val()이 작동하지 않는 문제를 해결하기 위한 방법 및 코드 예제 프런트엔드 개발에서 jQuery는 페이지 요소를 조작하는 데 자주 사용됩니다. 그 중 양식 요소의 값을 가져오거나 설정하는 것은 일반적인 작업 중 하나입니다. 일반적으로 우리는 jQuery의 .val() 메서드를 사용하여 양식 요소 값을 처리합니다. 그러나 때때로 jQuery.val()이 작동하지 않는 상황이 발생하여 일부 문제가 발생할 수 있습니다. 이 기사에서는 jQuery.val(

Ajax 기반의 Scrapy 비동기 로딩 구현 방법 Ajax 기반의 Scrapy 비동기 로딩 구현 방법 Jun 22, 2023 pm 11:09 PM

Scrapy는 웹사이트에서 데이터를 빠르고 효율적으로 얻을 수 있는 오픈 소스 Python 크롤러 프레임워크입니다. 그러나 많은 웹사이트는 Ajax 비동기 로딩 기술을 사용하므로 Scrapy가 데이터를 직접 얻는 것이 불가능합니다. 이 기사에서는 Ajax 비동기 로딩을 기반으로 한 Scrapy 구현 방법을 소개합니다. 1. Ajax 비동기 로딩 원리 Ajax 비동기 로딩: 전통적인 페이지 로딩 방법에서는 브라우저가 서버에 요청을 보낸 후 서버가 응답을 반환할 때까지 기다려야 다음 단계로 진행하기 전에 전체 페이지를 로드해야 합니다.

순수 CSS를 통해 폭포 흐름 레이아웃을 구현하는 방법 및 기법 순수 CSS를 통해 폭포 흐름 레이아웃을 구현하는 방법 및 기법 Oct 20, 2023 pm 06:01 PM

순수 CSS를 통해 폭포 흐름 레이아웃을 구현하는 방법 및 기법 폭포 레이아웃(Waterfall Layout)은 웹 디자인에서 일반적인 레이아웃 방법으로, 높이가 일정하지 않은 여러 열에 콘텐츠를 배열하여 폭포와 같은 시각적 효과를 만듭니다. 이 레이아웃은 사진 디스플레이, 제품 디스플레이 등 많은 양의 콘텐츠를 표시해야 하는 상황에서 자주 사용되며 좋은 사용자 경험을 제공합니다. 폭포식 레이아웃을 구현하는 방법에는 여러 가지가 있으며 JavaScript나 CSS를 사용하여 구현할 수 있습니다.

CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법 CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 소개하는 두 가지 방법 Sep 26, 2021 am 10:58 AM

CSS에서 폭포 흐름을 구현하는 방법은 무엇입니까? 다음 기사에서는 CSS를 사용하여 폭포 흐름을 구현하는 두 가지 방법을 소개합니다. 도움이 되기를 바랍니다.

Vue3의 정지 기능에 대한 자세한 설명: 비동기 데이터 로딩 최적화 Vue3의 정지 기능에 대한 자세한 설명: 비동기 데이터 로딩 최적화 Jun 18, 2023 am 08:10 AM

Vue3의 정지 기능에 대한 자세한 설명: 비동기 데이터 로딩 최적화 현대 웹사이트와 애플리케이션에서는 비동기 데이터 로딩이 필수적입니다. 그러나 네트워크 연결 속도의 불안정으로 인해 비동기 데이터 로딩으로 인해 사용자 인터페이스가 지연되거나 정지될 수 있습니다. 이 문제를 해결하기 위해 Vue3에서는 비동기 데이터 로딩을 최적화하는 새로운 일시 중지 기능을 도입했습니다. 서스펜스 기능은 Vue3의 새로운 기능으로, 비동기식으로 데이터를 로드할 때 로딩 UI를 표시할 수 있습니다.

HTML을 읽는 방법 HTML을 읽는 방법 Apr 05, 2024 am 08:36 AM

HTML 자체는 파일을 읽을 수 없지만 다음과 같은 방법으로 파일을 읽을 수 있습니다. JavaScript(XMLHttpRequest, fetch()) 사용; 서버 측 언어(PHP, Node.js) 사용; get() , axios, fs-extra).

Vue3의 DefineAsyncComponent 함수에 대한 자세한 설명: 비동기 로딩 컴포넌트 적용 Vue3의 DefineAsyncComponent 함수에 대한 자세한 설명: 비동기 로딩 컴포넌트 적용 Jun 18, 2023 pm 07:39 PM

Vue3의 DefineAsyncComponent 함수에 대한 자세한 설명: 비동기 로딩 컴포넌트 적용 Vue3에서는 컴포넌트를 비동기적으로 로드해야 하는 경우가 종종 있습니다. 이때 Vue3에서 제공하는 DefineAsyncComponent 함수를 이용하여 컴포넌트를 비동기적으로 로딩하는 기능을 구현할 수 있습니다. 이 글에서는 Vue3의 DefineAsyncComponent 함수 사용 및 적용 시나리오를 자세히 소개합니다. 1.AsyncComponent 정의

See all articles