元素出现在视图中时触发的js

素出现在视图中时触发的JavaScript：Intersection Observer API简介

在前端开发中，有时我们需要在元素进入视图时触发特定的操作。无论是实现懒加载图片、无限滚动，还是统计广告曝光率，Intersection Observer API 都提供了一种高效且简便的解决方案。本文将详细介绍 Intersection Observer API 的使用，并通过一个示例展示如何在元素出现在视图中时触发 JavaScript 操作。

什么是Intersection Observer API？

Intersection Observer API 是一种异步观察目标元素与其祖先元素（或顶级文档视口）交叉状态变化的机制。通过这个API，可以轻松实现以下功能：

懒加载图片或其他资源
实现无限滚动效果
统计元素在视图中的可见性
触发动画效果

基本使用步骤

创建观察者实例：使用 IntersectionObserver 构造函数创建一个观察者实例，并指定回调函数。
指定观察选项：通过选项对象指定根元素、根元素的内边距和触发回调的阈值。
观察目标元素：调用观察者实例的 observe 方法，传入要观察的目标元素。

示例：元素出现在视图中时触发操作

下面是一个完整的示例代码，当目标元素出现在视图中时触发数据加载操作。

html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intersection Observer Demo</title>
  <style>
    .container {
      height: 100vh;
      overflow-y: scroll;
    }
    .box {
      height: 100px;
      margin: 20px;
      background-color: lightblue;
    }
    #target {
      height: 100px;
      margin: 20px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="container" ref="tableContainer">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div id="target">Target Element</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      function handleIntersection(entries) {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            console.log('Target element is in view!');
            // 这里可以添加你希望执行的操作，例如加载数据
            getTableData();
          }
        });
      }

      function getTableData() {
        console.log('Fetching table data...');
        // 模拟数据加载
        setTimeout(() => {
          console.log('Data loaded');
        }, 1000);
      }

      function initIntersectionObserver() {
        const options = {
          root: null,
          rootMargin: "0px",
          threshold: 0.1
        };

        const observer = new IntersectionObserver(handleIntersection, options);
        const target = document.getElementById('target');

        if (target) {
          observer.observe(target);
        }
      }

      initIntersectionObserver();
    });
  </script>
</body>
</html>

代码说明

HTML结构：包含一个可滚动的容器和几个元素，其中一个元素具有 id="target"，是我们要观察的目标元素。
CSS样式：简单的样式来设置容器和元素的高度、颜色等。
JavaScript逻辑：
handleIntersection(entries)：回调函数，当目标元素进入或离开视图时被调用。在这里，我们在控制台打印一条消息并调用 getTableData 函数模拟数据加载。
initIntersectionObserver()：初始化 Intersection Observer，设置观察选项，并开始观察目标元素。

总结

Intersection Observer API 提供了一种高效的方式来检测元素是否出现在视图中，并触发相应的操作。通过合理地使用该API，可以显著提高页面性能和用户体验。希望本文能帮助你理解并应用 Intersection Observer API，在实际项目中灵活实现各种效果。如果你有任何问题或建议，欢迎在评论区留言讨论。

参考文档

MDN Web Docs: Intersection Observer API
W3C Intersection Observer Specification

希望这篇文章对你有所帮助！Happy Coding!

原文：https://juejin.cn/post/7381348874449698825

述内容针对本人的 blog 引用程序创建二零视图和URL，下面将添加模板，并以用户友好的方式显示帖子。

接下来在blog 应用程序目录中创建下列目录和文件：

templates/
     blog/
           base.html
　　　post/
    　　　　list.html
　　　　　  detail.html

上述结构将表示模板的文件结构。其中，base.html 文件包含了站点的HTML 主结构，并将内容划分为主内容区域和侧栏。list.html 和 detail.html 文件继承自base.html 文件，分别用于渲染博客帖子列表以及详细视图。

Django包含了功能强大的模板语言，并可确定数据的显示方式。该语言基于模板标签、模板变量以及模板过滤器，如下所示：

模板标签负责控制模板的渲染，形如 {% tag %}
当模板被渲染时，模板变量被替换为对应值，形如{{ variable }}
模板过滤器可针对显示调整变量，形如 {{ variable| filter }}

读者可以访问 https://docs.djangoproject.com/en/3.0/ref/templates/builtins/，以查看全部内建的模板标签和过滤器。

下面有关编辑 base.html 和 list.html 和 detail.html 还需读者们自行完成，这里本人就不再展示。

其中{% load static %}的作用是通知Django 加载 django.contrib.staticfiles应用程序提供的静态模板标签，该标签位于 INSTALLED_APPS 设置项中。

{% extends "blog/base.html" %}的作用是通知Django 继承 blog/base.html 模板。

一切完成后，读者可以返回浏览器中刷新，单击帖子标题以查看帖子的详细视图。

感谢大家的查看与支持。

一篇文章讲解“视图-过滤”，本篇文章讲解“视图-模板引擎”。

内置模板引擎

视图的模板文件可以支持不同的解析规则，默认情况下无需手动初始化模板引擎。

可以通过下面的几种方式对模板引擎进行初始化。

1. 配置文件

ThinkPHP5.0版本与ThinkPHP5.1版本的目录结构有所变动，因此两个版本的模板设置配置项位置不同

①ThinkPHP5.0版本模板引擎的参数在配置项文件（config.php）中。

②ThinkPHP5.1版本内置模板引擎的参数统一在配置目录的template.php文件中配置。

2. 视图根目录

注：以下以ThinkPHP5.1版本作为示例

1）视图文件的根目录默认情况下位于模块的view目录，每个模块的视图目录可以通过模板参数view_path自定义。

①将模板位置设置到根目录下的viewport文件夹下，在config/template.php文件中进行设置。

②创建Index控制器，并新建index方法

③在根目录的viewport/index/下新建index.html模板

预览：

2）可以用view_base模板引擎参数定义全局的视图根目录，然后模块作为子目录。

①在config/template.php文件中定义view_base

访问Index控制器的index方法，预览：

提示模板文件不存在，并指出模板路径“../template/index/index/index.html”。

②在“../template/index/index/”下创建index.html模板

访问Index控制器index方法，预览：

注意：
1. view_base与view_path的区别：
①view_base的优先级高于view_path
②view_base定义全局视图根目录，模块为子目录，例设置view_base值为“../template/”，模板路径为“../template/index/index/index.tml”，意义为：全局根目录template下的index模块的index控制器的index.html模板。
③view_path定义模块下的视图目录，例设置view_path值为“../viewport/”，模板路径为：“../viewport/index/index.html”，意义为视图目录viewport下的index控制器的index.html模板。当访问其他模块index控制器的index.html模板时，访问的是同一个，都是“../viewport/index/index.html”。

3. 调用engine方法初始化

视图类也提供了engine方法对模板解析引擎进行初始化或者切换不同的模板引擎。

①在Index控制器中，新建vEngine方法

访问预览：

注意：
1. 表示当前视图的模板文件使用原生php进行解析。

②在view/index/下新建index.php文件

预览：

使用第三方模板引擎

官方扩展库中提供了一个类似于angularjs语法的模板引擎think-angular，具体可以参考参考手册：

另外还包括了一个twig模板引擎扩展：

ThinkPHP5连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“数据库”

在线咨询

上一篇：HTML5 游戏引擎 LayaBox 启动开源计划
下一篇：HTML+CSS网页设计，小米热评产品布局样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商