在多个设备上按需加载，例如移动设备和 ipad pro 和 ipad

Posted 2023-05-09

技术标签:

【中文标题】在多个设备上按需加载，例如移动设备和 ipad pro 和 ipad【英文标题】：Loading on demand on multiple devices like mobile and ipad pro and ipad 【发布时间】：2019-11-10 07:59:24 【问题描述】：

我还想在台式机、移动设备、ipad 和高清设备上进行滚动。为了激发功能，我所做的是在一个页面中，我有一个名为 mainContent 的潜水标签。我正在使用敲除向 div 标签添加更多文本。的默认行为浏览器是内容溢出垂直回滚出现。当滚动条被下拉时，我写了一个函数在 div 标签中添加更多文本。我已经在codepen中放了相同的代码，但无法使其正常工作，所以我在下面放了相同的代码

问题 1. 移动设备，当我触摸移动设备并向下滑动时，我无法调用该功能，也无法调用在 div 标签中加载更多文本。即使滚动条是可访问的，我也看不到结果。

问题 2. 当浏览器大小百分比设置为 HD 分辨率的 67% 时，我没有看到滚动条，因为我没有看到滚动条我无法添加更多文本元素。

期待。我期待按需加载内容。它可以通过我正在处理的滚动条。如果还有更好的方法也请建议。

 <!doctype html>
<html lang="en">
<head>
<title>Test Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome"> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script> 
</head>
<body>
    <div id="maincontent">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
        text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

</body>
</html>

<script type="javascript">
function TestModal() 

    var self = this;

    self.fetchNext = function () 
        var result = $('#maincontent').val();
        var nresult = result + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.       It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,             and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
        $('#maincontent').val(nresult)
    




$(document).ready(function () 

    var testModal = new TestModal();
    ko.applyBindings(testModal);


    $(window).scroll(function () 
        if ($(window).scrollTop() == $(document).height() - $(window).height()) 
            testModal.fetchNext();
            alert('hdf');
        
    );
);
</script>

https://codepen.io/jganesh/pen/jjYMbW

【问题讨论】：

【参考方案1】：

问题 1：根据您在 CodePen 中的示例，要读取/更改 div 的内容，您需要使用 text() 或 html() 方法，而不是 val()。目前您的代码甚至无法在桌面上运行。

问题 2：您可能应该在 #maincontent 中加载足够的内容，直到看到滚动条...不幸的是，很难确定设备中文本占用的空间，因为它取决于许多因素（分辨率、窗口大小、格式等）。

【讨论】：

我已经更新了示例。它应该可以在桌面上运行。请。如果这是可能的或无法实现的事情您在 CodePen 中的示例还需要 jQuery 和 Knockout。您可以使用“设置”页面执行此操作。

以上是关于在多个设备上按需加载，例如移动设备和 ipad pro 和 ipad的主要内容，如果未能解决你的问题，请参考以下文章

iOS iCloud 文档更改通知

使用 CSS 定位移动设备（iPad、iPhone），但排除非移动设备

Worklight - require.js 不会在 iPad2 iOS 设备上加载模块

Vue.js中用webpack合并打包多个组件并实现按需加载