Window onload 事件不会在 iPad ios 8.4 中触发

Question

我遇到了以下奇怪的问题：

功能：
当我打开我的网站页面时，它有很多图像并且 Javascript/jQuery 用于客户端功能。单击每张图片时，所有其他图片都会更改其不透明度，并且所选图片会显示一个 <div>，其中包含该图片的一些信息和一段视频。

我使用了 jQuery unveil，它仅在页面上触发滚动事件后才加载所有图像。在此之前，它会显示“正在加载”图像。
我在 window.onload 事件上添加了一个 Javascipt，以便在单击图像时调整 <div> 元素的大小。还有一些 Javascript 识别浏览器并相应地设置视频标签源。
所有图像都在数据列表中呈现，并从数据库绑定。
由于 unveil 仅在滚动事件后才加载图像，因此我在页面加载时添加了代码以人为地按像素滚动页面。

问题：
我在 Chrome 或 Safari 上的 iPad(iOS 8.4) 中打开相同的页面。我在 window.onload 下的所有 Javascript 都没有触发。

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);
}

我已经尝试过的东西：

我认为 jQuery unveil 可能会使页面变慢或其他原因。所以，我删除了调用，但问题是在 window.onload 中调用了 unveil();。所以，如果 window.onload 没有被解雇，移除揭幕就没有任何意义。
我在 window.onload() 上添加了一个 alert()，但在这种情况下，一切正常。

除 ipad 和 ios 8.4 外，所有功能在所有设备上都能完美运行（即使在更早的 os 中也能正常运行）

Help/Suggessions 非常感谢。

编辑：
我找到了一个 jsconsole through which we can see the console logs in iPad on the desktop. Here 是我们如何使用它。
我检查了日志，发现当我收到错误 JQMIGRATE: jQuery.browser is deprecated 时，我的 window.onload 事件没有触发。然而，如果我得到 log JQMIGRATE: Logging is active，一切正常。我的 jqmigrate 参考在母版页中，

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

Answer 1

我找不到控件不触发 window.onload 事件的原因。但是对于那些会遇到同样问题的人，我post在这里反过来解决这个问题。（显然我不想获得 tumbleweed 徽章..）

我在 window.onload
当我在页面加载时调用 javascript 函数 jWDScrollWindow() 来滚动页面时，我在 jWDScrollWindow() 函数本身中添加了 $(".lazy").unveil();。

这解决了我在 iPad 中的问题，但更改不是特定于设备的。

function jWDScrollWindow() {
    //Apply lazy loading functionality to images
    $(".lazy").unveil();
    //scroll by 1px to load the images
    $(window).scrollTop($(window).scrollTop() + 1);
}

这不是问题的完整解决方案，而是一项工作。如果有人对此问题有原因或解决方案，请post作为答案。

Answer 2

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

TL;DR:

如果 <audio> 或 <video> 标签包含 preload="none" 属性（可能还有其他变化）

我认为 "none" 的预加载实际上不应该尝试加载媒体数据，所以它为什么会干扰 window 加载？

进一步说明：

在我帮助建立的 Wordpress/WooCommerce 站点中，客户有几名员工都使用 iPhone iOS 8.4.1。三个 iPhone 5 和一个 iPhone 6。其中两个 iPhone 5 有问题，另一个 iPhone 5 用户和 iPhone 6 用户没有这样的问题所以最初我认为问题出在 order/speed 上，其中一些 jQuery 插件可能已加载。

症状是移动导航之类的东西 expand/contract 和 AJAX 搜索功能对这些用户来说会失败，根本无法运行，但所有其他 browsers/desktops/Android 测试都是很好。

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

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

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

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"）：

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 属性，该回调将在 [=72= 之前触发] 像这样加载：

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

Answer 3

还有一个解决方法：

var iOS8 = navigator.userAgent.match(/(iPad|iPhone|iPod).*OS 8_\d/i);
if( iOS8 ){
    setTimeout(function(){
        $(window).trigger('load');
    }, 3500);
}

这将触发加载，'trick' Safari 在 iOS8 上认为 $(window) 对象已加载，因此

中的代码

$(window).on('load', function());

会起作用。

希望这对搜索此内容的人有所帮助:)

Window onload 事件不会在 iPad ios 8.4 中触发

Window onload event does not fire in iPad ios 8.4

jquery

ipad

jquery-events

ios8.4

jqmigrate