【发布时间】：2015-10-23 00:47:21
【问题描述】：
我遇到了以下奇怪的问题：
功能：
当我打开包含许多图像并使用 Javascript/jQuery 用于客户端功能的网站页面时。单击每个图像时，所有其他图像都会更改其不透明度，并且所选图像会显示一个 <div>，其中包含该图像的一些信息和一个视频。
- 我使用了 jQuery 揭幕，它仅在页面上触发滚动事件后加载所有图像。在此之前，它会显示“加载”图像。
- 我在
window.onload事件上添加了一个Javascipt，以在单击图像时调整<div>元素的大小。以及一些识别浏览器并相应设置视频标签源的Javascript。 - 所有图像都在数据列表中呈现，并从数据库绑定。
- 由于仅在滚动事件后才加载图像，因此我在页面加载时添加了一个代码，以人工将页面滚动一个像素。
问题：
我在 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没有被解雇，那么取消揭幕就没有任何意义。 - 我在
window.onload()上添加了alert()，但在这种情况下，一切正常。
所有功能都可以在所有设备上完美运行，除了 ipad 和 ios 8.4（即使在早期的操作系统中也能很好地运行）
非常感谢您的帮助/建议。
编辑：
我找到了一个jsconsole，通过它我们可以在桌面上看到iPad中的控制台日志。 Here 是我们如何使用它。
我检查了日志，发现当我收到错误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>
【问题讨论】：
-
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.为什么不直接触发滚动事件？？？ -
I added an alert() on window.onload(), but in this case, everything works perfect听起来像一个异步问题，在加载unveil插件脚本之前触发了窗口加载。控制台中的任何错误？加载文档后是否包含脚本？我问它，但如果是的话，如果脚本没有缓存，这应该是所有浏览器/操作系统的问题 -
@A.Wolff: 1. 我触发了滚动事件（有问题已更新） 2. 有什么方法可以检查 iPad 中的控制台吗？桌面上的任何浏览器都没有错误。
-
我没有 iPad，所以...如果尚未完成，您应该做的第一件事是清除浏览器的缓存，这可能只是问题编辑：也许 stackoverflow.com/questions/7449317/… oops听起来好像过时了...
-
确实如此。和“谷歌浏览器安卓手机远程调试”仅适用于安卓手机
标签： jquery ipad jquery-events ios8.4 jqmigrate