Windows onload事件不会在ipad ios 8.4中触发

Question

我面临以下奇怪的问题:

功能:
当我打开我的网站页面,其中有许多图像并使用javascript/jquery用于客户端功能.在单击每个图像时,所有其他图像都会更改其不透明度,所选图像会显示<div>包含图像的一些信息和视频.

1. 我使用了jquery unveil,只有在页面上触发了一个scroll事件后才会加载所有图像.直到它,它显示一个"加载"图像.
2. 我在window.onload事件上添加了一个javascipt,以便在<div>单击图像时调整元素的大小.还有一些javascript可以识别浏览器并相应地设置视频标记源.
3. 所有图像都在数据主义内部呈现,并从数据库绑定.
4. 由于unveil仅在滚动事件之后加载图像,我在页面加载时添加了一个代码以人工地按像素滚动页面.

问题:
我在Chrome或Safari上打开iPad(iOS 8.4)中的同一页面.我的所有javascript window.onload都不会触发.

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. 我添加了一个alert()window.onload(),但在这种情况下,一切都很完美.

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

帮助/建议非常感谢.

编辑:
我找到了一个jsconsole,我们可以在桌面上看到iPad中的控制台日志.以下是我们如何使用它.
我检查了日志,发现当我收到错误时JQMIGRATE: jQuery.browser is deprecated,我的window.onload事件不会触发.然而,如果我得到日志JQMIGRATE: Logging is active,一切正常.我的jqmigrate参考是在母版页中,

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

Answer 1

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

TL; DR:

如果一个<audio>或<video>标签包含该属性preload="none"(以及其他可能的变体),iOS8的各种版本似乎都会阻止窗口上传

对我来说没有意义,因为"无"的预加载实际上不应该尝试加载媒体数据,所以为什么它会干扰窗口加载？

进一步说明:

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

症状是,应该扩展/收缩的移动导航和AJAX搜索功能将对这些用户失败,而根本不起作用,但所有其他浏览器/桌面/ Android测试都很好.

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

所以我搜索iOS8,窗口载荷和音频错误,我发现这两个小宝石包含与各种iOS版本的音频问题相关的注释:

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

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

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

该问题与window.onload事件有关,如果存在设置了preload ="none"属性的视频或音频,则不会触发该事件.window.onload将在每个资产加载后运行,并且iOS 8会一直等待视频加载,这将永远不会.

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

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