js+css는 웹 페이지를 로드할 때 사용자 경험을 향상시킵니다.

이번에는 노트가 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

필요재료 :

애니메이션 GIF 사진 로딩 중

기본 논리:

모달 박스 마스크 + loading.gif 애니메이션,
모달 박스는 기본적으로 숨겨집니다
페이지에서 Ajax 요청 데이터 전송이 시작되면 모달 박스가 표시됩니다
요청이 완료되고 모달 박스가 숨겨집니다

간단한 연습을 위해 Django를 통해 새로운 웹 애플리케이션을 만들어 보겠습니다

연습

1. 새 Django 프로젝트를 생성하고, app01 애플리케이션을 생성하고, 라우팅 및 정적 구성을 생략합니다. gif 애니메이션을 static 폴더에 넣으면 구조는 다음과 같습니다:

2. 보기에서 test.html 페이지를 반환하는 함수 를 정의합니다.

def test(request):
 return render(request, 'test.html')

3. test.html 페이지는 다음과 같습니다.

nbsp;html>


 <meta>
 <title>Title</title>
 <!-- 导入css样式 -->
 <link>
 <!-- 导入jquery 和 js文件 -->
 <script></script>
 <script></script>


<h1>你好啊，朋友！</h1>
<hr>
<p>
 </p><p>正在请求服务器数据....</p>

<!-- 模态框部分 -->
<p>
 </p><p></p>

4. CSS 스타일은 다음과 같습니다:

/* 模态框样式 */
.loading {
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-color: black;
 opacity: 0.4;
 z-index: 1000;
}
/* 动图样式 */
.loading .gif {
 height: 32px;
 width: 32px;
 background: url('/static/img/loading.gif');
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -16px;
 margin-top: -16px;
 z-index: 1001;
}

설명:

• 위치를 고정하고 위쪽, 아래쪽, 왼쪽 및 오른쪽을 0으로 설정하면 모달 상자가 전체 페이지를 덮습니다.

• Gif 동적 이미지를 배경으로 설정하여 로딩 효과를 표시합니다.
  z-index 값을 설정하여 gif 이미지를 모달 상자 위에 띄우세요.

• background-color: black은 명확하게 보이도록 하며 구체적으로 사용할 경우 흰색으로 설정할 수 있습니다.

• 5. JS 파일은 다음과 같습니다:

$(function () {
 //准备请求数据，显示模态框
 $('p.loading').show();
 $.ajax({
  url: "/ajax_handler.html/",
  type: 'GET',
  data: {},
  success: function (response) {
   var content = response.content;
   $('#content').html(content);
   //请求完成，隐藏模态框
   $('p.loading').hide();
  },
  error: function () {
   $('#content').html('server error...');
   //请求完成，隐藏模态框
   $('p.loading').hide();
  }
 })
});

설명:

페이지가 로드된 후 Ajax 요청을 보내기 시작하고 서버 ajax_handler 뷰에서 데이터를 요청합니다. 이때 요청이 완료되면 성공 여부에 관계없이 모달 상자가 표시됩니다. 숨겨졌어.

6. ajax_handler 뷰는 다음과 같습니다. 네트워크 지연을 시뮬레이션하고 일부 문자열을 반환합니다.

from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串转义
def ajax_handler(request):
 # 模拟网络延迟
 import time
 time.sleep(3)
 msg = ''' XXX ''' # 这里你可以随便放入一些字符串
 return JsonResponse({"content": mark_safe(msg)})

효과는 다음과 같습니다:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 js+css는 웹 페이지를 로드할 때 사용자 경험을 향상시킵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!