ホームページ バックエンド開発 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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Ajax 例外とエラーを解決する方法のリストを公開する Ajax 例外とエラーを解決する方法のリストを公開する Jan 30, 2024 am 08:33 AM

Ajaxの異常が判明、各種エラーへの対処には具体的なコード例が必要 2019年、フロントエンド開発はインターネット業界において無視できない重要なポジションとなった。フロントエンド開発で最も一般的に使用されるテクノロジの 1 つである Ajax は、非同期のページ読み込みとデータ対話を実現でき、その重要性は自明です。しかし、Ajax 技術を使用すると、さまざまなエラーや例外が発生することが多く、これらのエラーにどう対処するかは、すべてのフロントエンド開発者が直面する問題です。 1. ネットワーク エラー Ajax を使用してリクエストを送信する場合、最も一般的なエラーは次のとおりです。

jQuery .val() が機能しない状況に効果的に対処する jQuery .val() が機能しない状況に効果的に対処する Feb 20, 2024 pm 09:36 PM

タイトル: jQuery.val() が動作しない問題を解決する方法とコード例 フロントエンド開発では、ページ要素の操作に jQuery がよく使われます。その中でも、フォーム要素の値の取得または設定は、一般的な操作の 1 つです。通常、フォーム要素の値を操作するには jQuery の .val() メソッドを使用します。ただし、jQuery.val() が機能しない状況が発生し、問題が発生する可能性があります。この記事では、jQuery.val() を効果的に扱う方法を紹介します。

AjaxベースのScrapy非同期読み込み実装方法 AjaxベースのScrapy非同期読み込み実装方法 Jun 22, 2023 pm 11:09 PM

Scrapy は、Web サイトからデータを迅速かつ効率的に取得できるオープンソースの Python クローラー フレームワークです。ただし、多くの Web サイトでは Ajax 非同期読み込みテクノロジーが使用されているため、Scrapy がデータを直接取得することはできません。この記事では、Ajax 非同期読み込みをベースとした Scrapy の実装方法を紹介します。 1. Ajax 非同期ロードの原則 Ajax 非同期ロード: 従来のページロード方法では、ブラウザがサーバーにリクエストを送信した後、サーバーが応答を返してページ全体をロードするまで待ってから、次のステップに進む必要があります。

純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック 純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック Oct 20, 2023 pm 06:01 PM

純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック。ウォーターフォール レイアウト (ウォーターフォール レイアウト) は、Web デザインで一般的なレイアウト方法です。コンテンツを高さの異なる複数の列に配置して画像を形成します。ウォーターフォールのような視覚効果です。このレイアウトは、写真表示や商品表示など、大量のコンテンツを表示する必要がある場面でよく使用され、ユーザーエクスペリエンスが優れています。ウォーターフォール レイアウトを実装するにはさまざまな方法があり、JavaScript または CSS を使用して実行できます。

CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法 CSSでウォーターフォールフローを実装するにはどうすればよいですか? 2つの導入方法 Sep 26, 2021 am 10:58 AM

CSSでウォーターフォールフローを実装するにはどうすればよいですか?次の記事では、CSSを使用してウォーターフォールフローを実装する2つの方法を紹介します。

Vue3のサスペンド機能の詳細解説:非同期データロードの最適化 Vue3のサスペンド機能の詳細解説:非同期データロードの最適化 Jun 18, 2023 am 08:10 AM

Vue3 のサスペンド機能の詳細説明: 非同期データ読み込みの最適化 最近の Web サイトやアプリケーションでは、非同期データ読み込みが不可欠です。ただし、ネットワーク接続速度が不安定なため、非同期データの読み込みにより、ユーザー インターフェイスで遅延やフリーズが発生する可能性があります。この問題を解決するために、Vue3 では非同期データの読み込みを最適化するための新しいサスペンド関数が導入されています。サスペンス機能はVue3の新機能で、非同期でデータをロードするまでの間、ロード中のUIを表示することができます。

htmlの読み方 htmlの読み方 Apr 05, 2024 am 08:36 AM

HTML 自体はファイルを読み取ることができませんが、JavaScript を使用する (XMLHttpRequest、fetch())、サーバーサイド言語を使用する (PHP、Node.js)、サードパーティのライブラリを使用する (jQuery. 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