1

我面临以下奇怪的问题：

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

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

问题：
我在 Chrome 或 Safari 上的 iPad(iOS 8.4) 中打开相同的页面。我所有的Javascriptwindow.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();在window.onload. 所以，如果window.onload没有被解雇，那么移除揭幕是没有任何意义的。
  2. 我添加了一个alert()on window.onload()，但在这种情况下，一切正常。

所有功能都可以在所有设备上完美运行，除了 ipad 和 ios 8.4（即使在早期的操作系统中也能很好地运行）

非常感谢帮助/建议。

编辑：
我找到了一个jsconsole，通过它我们可以在桌面上看到 iPad 中的控制台日志。这是我们如何使用它。
我检查了日志，发现当我收到错误时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>
4

3 回答 3

5

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

TL;博士：

<audio>如果or<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、window onload和audio bugs，我发现了这两个小宝石，其中包含与不同版本 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 属性，该回调将在窗口加载之前触发，例如：

$("audio").removeAttr("preload");
于 2015-08-25T12:05:07.010 回答
1

还有一个解决方法：

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

将工作。

希望这对正在寻找这个的人有所帮助:)

于 2016-05-13T08:58:45.603 回答
0

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

  1. 我在里面的代码后面（cs文件）中添加了大部分javascriptwindow.onload
  2. 当我jWDScrollWindow()在页面加载时调用 javascript 函数来滚动页面时，我添加了$(".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);
}

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

于 2015-08-05T12:38:59.263 回答