javascript - 在移动设备上的 pageshow() 事件上使用 jcarousel 框架时延迟几秒-6ren

javascript - 在移动设备上的 pageshow() 事件上使用 jcarousel 框架时延迟几秒

转载作者：行者123 更新时间：2023-11-28 09:08:37

25

4

我正在使用 jQuery框架-jcarousel.js在我的移动应用程序的页面上水平订购一些项目 jQuery Mobile + HTML .

当我导航到页面时，首先我从网络服务获取所有图像，将它们放在垂直列表中 - <ul>动态使用JavaScript，并以这种方式从索引调用脚本:

   $('#imagesPage').live('pageshow', function (event, ui) {
        jQuery('#imagesList').jcarousel({visible:2});
   });

它在某些移动设备上运行良好，但在 iPhone 中，例如，在导航到该页面时，它缓慢完成，因此您首先会看到垂直列表，1-2 秒后它会变为水平列表。

我该如何改进它，这样我就不会看到从垂直到水平的几秒钟的延迟变化，并且仅在列表正确组织后才显示页面。

最佳答案

那你就应该作弊。

<强> jCarousel 有一个init回调函数。让您的 ul 容器用一点 css 隐藏:

display: block;

当 jCarousel 完成初始化，只是通过init回调函数显示ul容器。

工作 HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />    
        <style>
            .hidden {
                display: none;
            }
        </style>
        <script src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.9.1.min.js"></script>
        <script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>                    
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $('#mycarousel').jcarousel({        
                    scroll: 1,
                    initCallback:   carouselInit
                });
            });

            function carouselInit() {
                $('#mycarousel').show();
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul id="mycarousel" class="jcarousel-skin-tango hidden">
                    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""/></li>
                    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""/></li>
                </ul>
            </div>
        </div>    
    </body>
</html>

关于javascript - 在移动设备上的 pageshow() 事件上使用 jcarousel 框架时延迟几秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16580984/

25

4

0

文章推荐： html - 忽略部分 HTML 文档的样式表规则

文章推荐： css - 是否可以有条件地链接 CSS 字体？

文章推荐： html - 容器内的 Bootstrap 模态与悬停相关联的样式

文章推荐： Swift -- Sprite Kit -- 场景有不同的大小

javascript - 延迟(延迟)加载背景图像？
我正在使用一个简单的脚本来延迟加载页面上的所有图像；图像源的路径包含在 data-src 属性中，然后放入 img 标记的实际 src 属性中。几乎大多数(？)延迟加载方法的实现都是如何工作的。这是
ios - 点击屏幕底部会导致 touchesBegan 延迟/延迟
我有一个具有多层 (SKNodes) 背景、游戏层、前景和 HUD 的场景，每个场景中都有多个 SKSpriteNode，用于滚动和您可以收集和点击的对象。 hud 层只有一个 SKSpriteNod
javascript - 延迟 promise 值未更新/解析/延迟
我有一个 Controller 函数来创建一些东西。调用该函数时，将运行 setInterval 来获取项目的状态。这是服务: (function () { 'use strict';
swift - 广播流媒体 AVPlayer 延迟(延迟)太高 swift 3
在我的应用程序中，我播放音频直播，延迟非常重要。我正在使用 AVPlayer，但启动需要 5-6 秒，并且我需要最多 3 秒的延迟。我怎样才能更快地开始播放并减少延迟？设置一个小缓冲区就可以了？如何使
python - 几次请求后 wsgiref.simple_server 出现奇怪的滞后/延迟/延迟/任何问题
我有一个恼人的问题。我有这个简单的服务器代码(比方说): #!/usr/bin/env python3 import wsgiref.simple_server def my_func(env, st
jQuery 延迟
我是 jquery deferreds 的新手。这里我有一个简单的example 。谁能告诉我为什么在其他函数完成之前就触发完成函数(“现在是我的时间”)？这里的人 example还创建一个延迟对
JavaScript 延迟
正在放置关闭之前的标签标记相同的 sa 将它们放在中部分并指定 defer="defer"属性？最佳答案是/否。是的，因为放置 defer 标签会等到文档加载完毕后再执行。否，因为放置
JavaScript 延迟
我知道Javascript没有delay(500)方法，它会延迟执行500毫秒，所以我一直试图通过使用setTimeout和setInterval来解决这个问题。 for(var i =0; i< 1
主写和从读的数据库复制滞后(延迟)
我们有一个读写主服务器和复制的从读服务器。在某些网络用例中，数据被发布并立即读取以发送回服务器。立即读取是在读取从属设备上完成的，由于延迟，数据尚未在那里更新。我知道这可能是复制设置的一个常见问题，
追赶实例之间的 Airflow 延迟
我有以下 dag 设置以从 2015 年开始运行追赶。对于每个执行日期，任务实例在一分钟内完成。但是，第二天的任务仅在 5 分钟窗口内开始。例如。上午 10:00、上午 10:05、上午 10:10
WatchKit:setTitle 延迟？
当我在 WatchKit 中推送一个新 Controller 并在新 Controller 的awakeWithContext: 方法中使用 setTitle 时，它需要一秒钟左右来设置标题，直到
渲染时抖动 SVG 延迟
我将图像显示为 SVG 文件和文本。出于某种原因，svg 图像的渲染速度比屏幕的其余部分慢，从而导致延迟，这对用户体验不利。这种延迟正常吗？我该怎么做才能让整个屏幕同时呈现？ Row( ma
firebase(延迟)动态链接匹配精度
我正在考虑在我的应用程序中使用 firebase 动态链接。我需要将唯一标识符从电子邮件生成的链接传递到用户应用程序中。当用户安装了应用程序时，这可以正常工作，但是，我对未安装应用程序的方式有些困惑。
JQuery 使用 .each() 延迟
您知道如何使用 JQuery 的延迟方法和一个函数来检测所有已更改的表单并将每个表单作为 Ajax 帖子提交吗？如果我只列出大量表单提交，我可以得到同样的结果，但如果我使用... $('form.c
jQuery 延迟 : $. when() 与多个对象
我需要一种方法来通过回调获取不同的脚本。这个方法工作正常: fetchScripts:function() { var _this=this; $.when( $.aj
淡出前的 JQuery 延迟
我编写了一个 jquery 脚本，允许我淡入和淡出 div，然后重复。该代码运行良好。但是，当我尝试添加延迟(我希望 div 在淡出之前保持几秒钟)时，它无法正常工作。我尝试在代码中的几个地方添加延迟
performance - 延迟、带宽和吞吐量之间有什么区别？
我正在努力在延迟、带宽和吞吐量之间划清界限。有人可以用简单的术语和简单的例子来解释我吗？最佳答案水比喻: 延迟是穿过管子所需的时间。带宽是管有多宽。水流量为吞吐量车辆类比: 从源到目的地
Azure 函数，延迟
我有一个 CRM 系统，当添加联系人时，我想将他们添加到会计系统中。我在 CRM 系统中设置了一个 Webhook，将联系人传递给 Azure 函数。 Azure 函数连接到会计系统 API 并在那
Android:延迟 AudioTrack
我有一个 Android AudioTrack，例如: private AudioTrack mAudioTrack; int min = AudioTrack.getMinBufferSize(sa
javascript - 延迟、可重置功能延迟
我正在 React 中开发一个 TODO 应用程序，并尝试构建将删除选中项目延迟 X 秒的功能，并且如果在这段时间内未选中该框，它将不会被删除。我遇到的主要问题是当用户在同一 X 秒内检查、取消检查

首页

博学

6Ren·AI

商城

javascript - 在移动设备上的 pageshow() 事件上使用 jcarousel 框架时延迟几秒