我面临以下奇怪的问题:
功能:
当我打开我的网站页面时,该页面包含许多图像并且 Javascript/jQuery 用于客户端功能。单击每个图像时,所有其他图像都会更改其不透明度,并且所选图像会显示<div>
包含一些信息和图像的视频。
- 我使用了 jQuery 揭幕,它仅在页面上触发滚动事件后才加载所有图像。在那之前,它会显示一个“正在加载”的图像。
- 我添加了一个 Javascipt on
window.onload
事件以在单击图像时调整<div>
元素的大小。还有一些 Javascript 可以识别浏览器并相应地设置视频标签源。 - 所有图像都在数据列表中呈现,并从数据库绑定。
- 由于仅在滚动事件之后才加载图像,因此我在页面加载时添加了一个代码,以人工将页面滚动一个像素。
问题:
我在 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);
}
我已经尝试过的事情:
- 我认为 jQuery 揭幕可能会使页面变慢或其他什么。所以,我删除了调用,但问题是
unveil();
在window.onload
. 所以,如果window.onload
没有被解雇,那么移除揭幕是没有任何意义的。 - 我添加了一个
alert()
onwindow.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>