Windows onload事件不会在ipad ios 8.4中触发 [英] Window onload event does not fire in ipad ios 8.4

问题描述

我正面临以下奇怪的问题：

I am facing following strange issue:

功能：

当我打开我的网页时有很多图像和javascript / jquery用于客户端功能。点击每张图片后，所有其他图片都会更改其不透明度，所选图片会显示< div> ，其中包含一些信息和图片视频。

Functionality:
When I open my website page which has many images and have javascript/jquery used for client side functionality. On clicking each image, all the other images changes their opacity and the selected image shows a <div> containing some information and a video for the image.

1. 我使用了jquery unveil，只有在页面上触发滚动事件后才会加载所有图像。直到它，它显示一个加载图像。


2. 我在 window.onload 事件中添加了一个javascipt来调整< div> 单击图像时的元素。还有一些javascript可以识别浏览器并相应地设置视频标记源。


3. 所有图像都在数据列表中呈现，并且正在从数据库中绑定。


4. 因为只有在滚动事件之后才会加载图像，我在页面加载时添加了一个代码，以人工方式滚动页面。

1. I have used jquery unveil which loads all the images only after a scroll event is fired on the page. Untill that, it displays a "loading" image.
2. I have added a javascipt on window.onload event to resize the <div> element when image is clicked. And some javascript that identifies the browser and set video tag source accordingly.
3. All the images are rendered inside a datalist and is being bound from database.
4. As unveil loads the image only after scroll event, I have added a code on page load to scroll a page by a pixel artificially.

问题：

我在Chrome或Safari上打开iPad（iOS 8.4）中的同一页面。我在 window.onload 下的所有javascript都不会触发。

Problem:
I open the same page in iPad(iOS 8.4) on chrome or safari. All my javascript under window.onload does not fire.

ASPX页面：

<script type="text/javascript" src="/js/jquery.unveil.js"></script>
<asp:DataList ID="dlPersonList" runat="server" OnItemDataBound="dlPersonList_OnItemDataBound"
RepeatDirection="Horizontal" RepeatLayout="Flow">
  <ItemTemplate>
    <div class="itemImage">
       <asp:HyperLink ID="hypPersonPicture" runat="server">
            <asp:Image ID="imgPersonPicture" runat="server" CssClass="lazy" />
       </asp:HyperLink>
    </div>
    <asp:Panel class="person-detail" ID="pnlpersonDetail" runat="server">
       <div class="person-content detailView">
        <%--Some text and other controls--%>          
        <asp:Panel ID="pnlVideo" runat="server">
            <div class="video-content">
                  <video id="personVideo" controls="controls" preload="none"> 
                        <%--Video source elements--%> 
                  </video>
            </div>
        </asp:Panel>
       </div>
   </asp:Panel>
  </ItemTemplate>
</asp:DataList>

CS代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Bind data list 
        dlPersonList.DataSource = SelectPersons();
        dlPersonList.DataBind();
        // Register the script for slide up effect            
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "scriptPerson", @"$(document).ready(function () {
                                                        jWDScrollWindow();});",
                                                        true);
    }
 }
protected void dlPersonList_OnItemDataBound(Object sender, DataListItemEventArgs e)
{
    /*Lazy loading functionality*/
    //Set the image source as loader image
    imgPersonPicture.Attributes.Add("src", "/img/loading.gif");
    //set image resource as actual image
    imgPersonPicture.Attributes.Add("data-src", imageObject.ImagePath.TrimStart('~'));
}

JS代码：

window.onload = function () {
    //Apply lazy loading functionality to images
    $(".lazy").unveil();
    //Javascript to set the width and height of the details div
    .
    .
    //Javascript to blur all the other images when one image is clicked
}
function jWDScrollWindow() {
    //scroll by 1px to load the images
    $(window).scrollTop($(window).scrollTop() + 1);
}

我尝试过的事情：

1. 我认为jquery unveil可能会使页面变慢或者什么。所以，我删除了调用，但问题是 unveil（）; 在 window.onload 中被调用。所以，如果没有触发window.onload，它就不会删除unveil。


2. 我在 window.onload（）上添加了一个alert（），但在这种情况下，一切都很完美。

1. I thought jquery unveil might have making the page slow or something. so, I removed the call but the problem is the unveil(); is called within window.onload. So, if window.onload is not being fired, it doesnt make any sence to remove the unveil.
2. I added an alert() on window.onload(), but in this case, everything works perfect.

所有功能在除ipad 8.4之外的所有设备中都能完美运行（即使在早期操作系统中也能很好用）

非常感谢帮助/建议。

编辑：

我找到了一个 jsconsole ，通过它我们可以在桌面上看到iPad中的控制台日志。 此处是我们如何使用它。

我检查了日志并发现当我收到错误 JQMIGRATE：jQuery.browser已被弃用，我的 window.onload 事件不会触发。然而，如果我得到log JQMIGRATE：Logging is active ，一切正常。
我的 jqmigrate 引用在母版页中，

I found one jsconsole through which we can see the console logs in iPad on the desktop. Here is how we can use it.
I checked the logs and found that when I am getting error JQMIGRATE: jQuery.browser is deprecated, My window.onload event doesn't fire. Whereas, if I get log JQMIGRATE: Logging is active, everything works fine. My jqmigrate reference is in master page as,

<script type="text/javascript" async src='/js/jquery-migrate-1.1.1.js'></script>

推荐答案

我最近也遇到过这个问题。听起来和你的Shubham情况类似。

I too recently encountered this issue. Sounds like a similar situation to yours Shubham.

TL; DR：

如果包含< audio> 或< video> 标记，各种版本的iOS8似乎会阻止触发窗口加载属性 preload =none（也许还有其他变种）

Various versions of iOS8 seem to prevent window onload from firing if an <audio> or <video> tag contain the attribute preload="none" (and maybe other variations)

我认为这是没有意义的无的预加载实际上不应该尝试加载媒体数据，为什么它会干扰窗口加载？

It makes no sense to me seeing as a preload of "none" should in fact NOT be trying to load media data so why it interferes with window onload??

进一步说明：

在我帮助构建的Wordpress / WooCommerce网站中，客户端有几个员工全部使用iPhone iOS 8.4.1。三个用iPhone 5和一个用iPhone 6.其中两个用iPhone 5有问题，另一个iPhone 5用户和iPhone 6用户没有这样的问题所以最初我假设问题在于一些jQuery的顺序/速度插件可能已经加载。

In a Wordpress/WooCommerce site that I'd helped build, the client had several employees ALL with iPhone iOS 8.4.1. Three with an iPhone 5 and one with iPhone 6. TWO of them with iPhone 5 had issues, the other iPhone 5 user and the iPhone 6 user had no such issue so originally I assumed the issue lay with the order/speed of which some jQuery plugins may have loaded.

症状是应该扩展/收缩的移动导航和AJAX搜索功能这些用户将失败并且根本不起作用所有其他浏览器/台式机/ Android测试都没问题。

The symptoms were that things like the mobile navigation that should expand/contract and the AJAX search functionality would fail for these users and not function at all but all other browsers/desktops/Android tested were fine.

该网站销售音频产品，其中许多都带有音频预览。经过一些（很多！）的测试后，我意识到用户在没有音频标签的页面上没有这个问题。

The site sells audio products, many with audio previews. After some (lots!) of testing I realised that the users did not have this issue when on a page WITHOUT an audio tag.

所以我搜索了 iOS8 ， window onload 和 audio bugs 我发现这两个小宝石包含与各种iOS版本的音频问题相关的评论：

So I searched on iOS8, window onload and audio bugs and I found these two little gems that contained comments related to audio issues on various versions of iOS:

http://themeforest.net/forums/thread/ios8-safari-breaks-windowload-info-for-authors/147825?page=1&message_id=1154236#1154236 （用户tommusrhodus）

http://themeforest.net/forums/thread/ios8-safari-breaks-windowload-info-for-authors/147825?page=1&message_id=1154236#1154236 (user "tommusrhodus")

如果您的页面中有任何标签或标签，那么它目前将在iOS8 safari中被破坏，它永远不会触发window.onload事件如果这些标签存在于DOM中。

if you have any or tags in your page, then it’s currently going to be broken in iOS8 safari which never fires the window.onload event if these tags are present in the DOM.

https://github.com/codevise/pageflow/issues/118 （我们呃lufes）：

https://github.com/codevise/pageflow/issues/118 (user "lufes"):

问题与window.onload事件有关，如果有视频或音频，则不会触发该事件使用preload =none属性设置。 window.onload将在每个资源加载后运行，iOS 8会一直等待视频加载，这将永远不会。

The problem is related to the window.onload event, which will not be triggered if there's a video or audio with the preload="none" attribute set. window.onload will run once every asset is loaded, and iOS 8 keeps waiting for the video to load, which will never do.

所以我的解决方案 - 因为我不想破解Wordpress核心 - 只是简单地通过jQuery在一个准备好的回调中删除preload属性，该回调会在窗口加载之前触发，如：

So the solution for me - since I didn't want to hack the Wordpress core - was to simply remove the preload attribute altogether via jQuery in a ready callback which would fire before the window onload like:

$("audio").removeAttr("preload");

这篇关于Windows onload事件不会在ipad ios 8.4中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！