TOGOUTECH

javascript - 如何知道一个元素是否被渲染?

coder 2024-05-16 原文

我的元素有 transition: transform .5s

然后它有一个单独的类:transform: translatex(-100%)

所以我想要实现的是,最初,元素位于左侧。 在窗口加载时,当元素被渲染时,我删除了转换类,浏览器将动画元素返回到它的正确位置。

但实际发生的是,当页面变得可见/呈现时,元素已经在正确的位置。而且没有动画。

我试过 setTimeout(function() {}, 0); 它不起作用。如果我将 setTimeout 设置为 1 秒,它会起作用,但有时渲染需要很长时间,我必须将 setTimeout 设置为 2 秒。但有时渲染速度很快,2 秒是一个很长的等待时间。

总的来说,我觉得这不是一种可靠或正确的方法。

我怎样才能以正确的方式实现我想要的目标?


编辑: 对不起,伙计们,在尝试整理演示后,我意识到我并没有在窗口加载时删除类。这是因为我的元素及其 javascript 和 css 加载了 AJAX。所以它可以发生在窗口加载之前或窗口加载之后。

无论如何,现在我的问题是,如果窗口加载时间过长怎么办?有没有可能我的元素会在窗口完成加载之前呈现?还是浏览器仅在整个窗口完成加载时才呈现?

因为我想尽快为元素设置动画。那么,在窗口需要很长时间加载(图像和慢速连接等)的情况下,等待窗口加载是否安全?

如果我在窗口加载后使用 AJAX 加载元素,我是否可以通过删除转换立即运行动画?或者我应该检测元素何时呈现?

最佳答案

您可能想尝试使用 DOMContentLoaded 的组合事件和 requestAnimationFrame . DOMContentLoaded 在文档完全加载和解析之后但在页面上的所有图像和其他资源完成下载之前触发。 requestAnimationFrame 将延迟类的删除,直到页面被绘制之后,元素才能正确过渡。

var box = document.getElementById('box'),
    showBox = function (){
      box.classList.remove('offscreen');
    };
document.addEventListener("DOMContentLoaded", function(event) {
    window.requestAnimationFrame(showBox);
});

jsfiddle

关于javascript - 如何知道一个元素是否被渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29868977/

有关javascript - 如何知道一个元素是否被渲染?的更多相关文章

  1. c# - 使用 LINQ 检查 List<string> 是否包含另一个 List<string> 中的元素 - 2

    如何使用C#中的LINQ检查一个列表是否包含另一个列表中存在的元素?我不想使用for/while循环。所以,如果List1有A、B、C而List2有B、1、2,那么我会返回true。 最佳答案 试试这个:List<string>a=...List<string>b=...varinComon=a.Intersect(b).Any(); 关于c#-使用LINQ检查List<string>是否包含另一个List<string>中的元素,我们在S

  2. c# - 在 C# 中获取列表中的公共(public)元素 - 2

    我有两个排序列表如下:varlist1=newList<int>(){1,1,1,2,3};varlist2=newList<int>(){1,1,2,2,4};我希望输出为:{1,1,2}如何在C#中执行此操作?有没有办法使用Linq? 最佳答案 使用Intersect:varcommonElements=list1.Intersect(list2).ToList(); 关于c#-在C#中获取列表中的公共(public)元素,我们在StackOverflow上找

  3. c# - C# 是否支持多个返回值? - 2

    这是一个非常基本的问题,如果我想做的事情很复杂/涉及,那么我不希望你深入细节......我读过这可能涉及结构或散列或一些我还没有完成其他可怕的程序。如果是这样,我相信它会很快找到我。致力于学习类、方法和返回值。我想让我的类/方法返回当前小时和分钟。很简单,真的。这是否构造正确或正确?classMyClass{publicintGetHour(inthr,intmin){DateTimedt=DateTime.Now;inthour=dt.Hour;intminute=dt.Minute;returnhour;returnminute;}}并且,从Main()调用它:出现一些错误(Noo

  4. c# - 检查服务器上是否存在文件 - 2

    我正在尝试使用我的ASP.NET网页后面的C#代码检查文件是否在服务器上。我知道该文件确实存在,因为我事先用一段代码将它放在了服务器上。任何人都可以看到为什么找不到文件。这是代码:wordDocName="~/specifications/"+Convert.ToInt32(ViewState["projectSelected"])+".doc";ViewState["wordDocName"]=wordDocName;if(File.Exists(wordDocName)){btnDownloadWordDoc.Visi

  5. c# - 如果返回类型是可枚举的,返回列表是否错误 - 2

    我经常遇到想要返回Enumerable<T>的情况来自方法或属性。打造回归Enumerable<T>,我用List<T>-实例。填写列表后,我返回列表。我一直以为这样就够了。但是存在调用者转换结果Enumerable<T>的可能性。回到List<T>并开始进一步使用它。如果稍后我更改方法的实现,调用者的代码将失败。为避免这种情况,我可以在将列表返回给调用者之前返回list.ToArray或创建一个只读列表。但对我来说,这似乎是一个很大的矫枉过正。你怎么看?请注意,我永远不会返回内部使用的列表,以便调用者可以更改我的对象的内部状

  6. c# - 字符串比较 == 是否仅因为字符串不可变才起作用? - 2

    我之前在比较两个字符串和它们的变量时有一个想法:stringstr1="foofoo";stringstrFoo="foo";stringstr2=strFoo+strFoo;//Eventhoughtstr1andstr2reference2different//objectsthefollowingassertionistrue.Debug.Assert(str1==str2);这是否纯粹是因为.NET运行时识别字符串的值是相同的并且因为字符串是不可变的使得str2的引用等于str1的引用?所以当我们执行str1==str2时,我们实际上比较引用而不

  7. c# - 我怎么知道属性是否是通用集合 - 2

    我需要使用PropertyInfo类知道类中属性的类型是否为泛型集合(List、ObservableCollection)。foreach(PropertyInfopin(o.GetType()).GetProperties()){if(pisCollection<T>?????)} 最佳答案 TypetColl=typeof(ICollection<>);foreach(PropertyInfopin(o.GetType()).GetProperties()){Typet=p.PropertyType;if

  8. c# - 如何确定枚举值是否具有一个或多个与之比较的值? - 2

    我有一个标有[Flags]属性的枚举,如下所示:[Flags]publicenumTag:int{None=0,PrimaryNav=1,HideChildPages=2,HomePage=4,FooterLink=8}在我的站点地图的站点地图节点上,我将标签组合的int值存储为一个属性。我需要做的是检查一个节点是否有一个或多个标签中的任何一个,例如标签.PrimaryNav|标记.HomePage.我正在努力使用必要的bool逻辑来确定枚举值是否具有一个或多个与之进行比较的值。如果不清楚,请见谅。如有必要,我可以提供更多信息。 最佳答案

  9. c# - 是否有 .NET 方法来枚举所有可用的网络打印机? - 2

    是否有直接的方法来枚举.NET中所有可见的网络打印机?目前,我正在展示PrintDialog以允许用户选择打印机。问题在于,本地打印机也会显示(以及XPSDocumentWriter等)。如果我可以自己枚举网络打印机,我可以显示一个仅包含这些打印机的自定义对话框。谢谢!! 最佳答案 从LocalPrintServer.DefaultPrintQueue获取默认打印机从PrinterSettings.InstalledPrinters获取已安装的打印机(从用户的角度来看)枚举列表:任何以\\开头的打印机都是网络打印机-所以使用newP

  10. c# - 如何判断文件是否已被修改? - 2

    我正在编写(某种)备份解决方案。它只是从位置C:\复制文件并将其粘贴到位置Z:\为保证速度快,复制粘贴前先检查原文件是否存在。如果是这样,它会执行一些“计算”来确定复制是否应该继续或备份文件是否是最新的。我发现这些计算很困难。最初,我比较了文件大小,但这还不够好,因为很有可能更改文件并将其大小相同(例如,在记事本中保存字符C与我保存的大小相同字符T)。所以,我需要查明修改日期是否不同。目前,我使用FileInfo类获取文件信息,但在查看所有字段后,没有任何内容看起来合适。如何检查以确保复制的文件已被修改?编辑我已经看到关于使用MD5校验和的建议,但我担心这可能是个问题,因为我比较的一些

随机推荐

  1. c# - 使用 Json.NET 的自定义反序列化 - 2

    我有课publicclassOrder{publicintId{get;set;}publicstringShippingMethod{get;set;}}我想将下面的JSON数据反序列化为上面的类/对象stringjson=@"{'Id':1,'ShippingMethod':{'Code':'external_DHLExpressWorldwide','Description':'DHLILSExpressWorldwide'}}";我的想法是JSON中的Shipping

  2. c# - 动态更改 Asp.Net Core 中的连接字符串 - 2

    我想在Controller中更改sql连接字符串,而不是在ApplicationDbContext中。我正在使用Asp.NetCore和EntityFrameworkCore。例如:publicclassMyController:Controller{privatereadonlyApplicationDbContext_dbContextpublicMyController(ApplicationDbContextdbContext){_dbContext=dbContext;}privatevoidChangeConnectionString(){//So,whatshouldbe

  3. c# - 复选框不适用于 bool View 模型属性 - 2

    我正在使用MVC6并且在我的表单中有一个复选框输入字段,但是当提交表单时,复选框的值总是作为false传递给ViewModel:这是在我的ViewModel中声明属性的方式:[Display(Name="IncludeSalesTax")]publicboolIncludeSalesTax{get;set;}下面是我的MVC6razor表单中的表单:<divclass="form-group"><divclass="checkbox"><label><inputasp-for="Inclu

  4. c# - 为什么我得到异常 : Too many automatic redirections were attempted on webclient? - 2

    在form1的顶部我做了:WebClientClient;然后在构造函数中:Client=newWebClient();Client.DownloadFileCompleted+=Client_DownloadFileCompleted;Client.DownloadProgressChanged+=Client_DownloadProgressChanged;然后我每分钟都会调用这个方法:privatevoidfileDownloadRadar(){if(Client.IsBusy==true){Client.CancelAsync();}else{Client.DownloadPr

  5. c# - StartsWith 方法 C# 不返回 TRUE - 2

    我从MSSQL数据库中读取了一些值,我喜欢对字符串进行一些操作。这是我用来检查某个字符串是否以另一个字符串开头的代码:Stringinput="ОсновнотоjавнообвинителстводенескаподнесепријавапротивБМ(59)одБитолазарадипостоењеосновинасомнениедекасторилкривичнидела„тешкиделапротивбезбедностаналуѓетоиимототвосообраќајот“и„неукажувањепомошналицеповреденовосообраќај

  6. c# - 富文本框 - 粗体 - 2

    我知道这里有很多“如何加粗文本”的问题,但没有一个答案有帮助,我认为可能是富文本框是在运行时创建的。我正在制作一个聊天客户端,所以我有一个分成几行的富文本框,消息如下:{名称}:{消息}\r\n我想加粗这个名字,我已经尝试了很多代码示例,但这是我最接近它的工作方式:intlength=textBox.Text.Length;textBox.Text+=roomChatMessage.from+":"+roomChatMessage.text+"\r\n";textBox.Select(length,roomChatMessage.from.Length)

  7. c# - 为什么所有委托(delegate)类型都彼此不兼容? - 2

    在C#中,所有委托(delegate)类型都彼此不兼容,即使它们具有相同的签名。例如:delegatevoidD1();delegatevoidD2();D1d1=MethodGroup;D2d2=d1;//compiletimeerrorD2d2=newD2(d1);//youneedtodothisinstead这种行为和语言设计决策背后的原因是什么。 最佳答案 InC#alldelegatetypesareincompatiblewithoneanother,eveniftheyhavethesamesignature.Wha

  8. c# - 无法为泛型类型创建 TypeConverter - 2

    我想创建一个TypeConverter对于通用类,像这样:[TypeConverter(typeof(WrapperConverter<T>))]publicclassWrapper<T>{publicTValue{//get&set}//othermethods}publicclassWrapperConverter<T>:TypeConverter<T>{//onlysupportToandFromstringspublicoverrideboolCanConvertFrom(ITypeDescriptorContextcon

  9. c# - 无法加载文件或程序集临时 ASP.NET 文件 - 2

    我正在使用C#(.NETFramework4)在ASP.NET上开发一个网站。创建新网站项目后,我尝试运行该项目。但我收到以下错误:Couldnotloadfileorassembly'file:///C:\Windows\Microsoft.NET\Framework\v4.0.30319\TemporaryASP.NETFiles\myfirst\159977c5\b9e740fc\App_global.asax.yfqtni9g.dll'oroneofitsdependencies.Thesystemcannotfindthefilespecified.我已经浏览

  10. c# - 如何将 xmldocument 保存到流中 - 2

    我已经编写了代码来使用XmlReader解析我的xml文件,所以我不想重写它。我现在已经为程序添加了加密。我有encrypt()和decrypt()函数,它们采用xml文档和加密算法。我有一个使用xml阅读器解析文件的函数,但现在有了xml文档,我不确定如何创建xmlreader。问题是如何将我的xml文档保存到流中。我敢肯定这很简单,但我对流一无所知。XmlDocumentdoc=newXmlDocument();doc.PreserveWhitespace=true;doc.Load(filep);Decrypt(doc,key);StreamtempStream=null;doc