4.CSS样式如下：

说明：

• 通过设置position: fixed，并令上下左右为0，实现模态框覆盖整个页面；
• 设置gif动态图为背景，居中，来显示加载效果；
• 通过设置z-index值，令gif图悬浮在模态框上面；
• background-color: black;是为了看着明显，具体使用时可以设为white;

5.JS文件如下：

说明：

页面载入后，开始发送Ajax请求，从服务端ajax_handler视图请求数据，这时显示模态框 请求完成后，不论成功与否，隐藏模态框

6.ajax_handler视图如下，它模拟网络延迟，并返回一些字符串：

效果如下：

如果显示不了gif动图，可能是浏览器缓存问题。项目完整代码在这里：nofollow" href="https://github.com/Ayhan-Huang/Loading">https://github.com/Ayhan-Huang/Loading

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。