Question

我正面临着一个奇怪的问题：

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

我使用了jquery unveil，只有在页面上触发滚动事件后才会加载所有图像。直到它，它显示一个＆＃34; loading＆＃34;图像。
我在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。因此，如果没有触发window.onload，它就不会删除unveil。
我在window.onload()上添加了一个提醒（），但在这种情况下，一切都很完美。

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

非常感谢帮助/建议。

修改
我找到一个jsconsole，通过它我们可以在桌面上看到iPad中的控制台日志。 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

我最近也遇到过这个问题。听起来和你的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 ，窗口onload 和音频错误，我发现这两个包含与音频问题有关的评论的小宝石各种版本的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");

Answer 2

还有一种解决方法：

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

这将触发加载，并在iOS8上“欺骗”Safari认为$(window)对象已加载，因此

中的代码

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

会奏效。

希望这有助于任何正在寻找此事的人：）

Answer 3

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

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

这解决了我在iPad上的问题，但更改并非特定于设备。

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

这不是一个完整的问题解决方案，而是一项工作。如果有人在这个问题上有理由或解决方案，请发帖作为答案。

Windows onload事件不会在ipad ios 8.4

3 个答案: