Событие загрузки окна не запускается в ipad ios 8.4

Я сталкиваюсь со следующей странной проблемой:

Функциональные возможности :
Когда я открываю страницу моего веб-сайта, на которой много изображений и javascript/jquery используется для функциональности на стороне клиента. При нажатии на каждое изображение все остальные изображения изменяют свою непрозрачность, и выбранное изображение показывает <div> содержащий некоторую информацию и видео для изображения.

  1. Я использовал jquery unveil, который загружает все изображения только после запуска события прокрутки на странице. До этого он отображает "загрузочное" изображение.
  2. Я добавил Javascipt на window.onload событие для изменения размера <div> элемент, когда изображение нажата. И некоторый JavaScript, который идентифицирует браузер и соответственно устанавливает источник видео тега.
  3. Все изображения отображаются внутри списка данных и связаны с базой данных.
  4. Поскольку unveil загружает изображение только после события прокрутки, я добавил код при загрузке страницы для искусственной прокрутки страницы на пиксель.

Проблема:
Я открываю ту же страницу в iPad(iOS 8.4) на Chrome или Safari. Весь мой JavaScript под window.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 может сделать страницу медленной или что-то в этом роде. Итак, я удалил звонок, но проблема заключается в unveil(); называется внутри window.onload, Таким образом, если window.onload не запускается, он не имеет смысла удалять его.
  2. Я добавил предупреждение () на window.onload(), но в этом случае все работает отлично.

Вся функциональность прекрасно работает на всех устройствах, кроме ipad с ios 8.4 (прекрасно работает даже в ранних версиях os)

Помощь / Предложения очень ценятся.

РЕДАКТИРОВАТЬ:
Я нашел одну http://jsconsole.com/, через которую мы можем видеть журналы консоли в iPad на рабочем столе. Вот как мы можем это использовать.
Я проверил журналы и обнаружил, что когда я получаю ошибку 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>
Источник

3 ответа

Решение

Я слишком недавно столкнулся с этой проблемой. Похоже, ситуация похожа на вашу Shubham.

TL; DR:

Различные версии iOS8, по-видимому, предотвращают запуск окна при загрузке, если <audio> или же <video> тег содержит атрибут preload="none" (и, возможно, другие варианты)

Для меня нет смысла видеть, что предварительная загрузка "none" на самом деле НЕ должна пытаться загрузить медиа-данные, так почему это мешает загрузке окна?

Дальнейшее объяснение:

На сайте Wordpress/WooCommerce, который я помогал создать, у клиента было несколько сотрудников ВСЕ с iPhone iOS 8.4.1. Три с iPhone 5 и один с iPhone 6. У двух из них с iPhone 5 были проблемы, у другого пользователя iPhone 5 и пользователя iPhone 6 такой проблемы не было, поэтому изначально я предполагал, что проблема заключается в порядке / скорости, с которой некоторые jQuery плагины могут быть загружены.

Симптомами было то, что такие вещи, как мобильная навигация, которая должна расширяться / сжиматься, и функции поиска AJAX не будут работать для этих пользователей и не будут работать вообще, но все остальные протестированные браузеры / рабочие столы /Android были в порядке.

На сайте продаются аудиопродукты, многие с аудио-превью. После некоторого (большого количества!) Тестирования я понял, что у пользователей не было этой проблемы, когда на странице БЕЗ звукового тега.

Так что я искал на iOS8, загрузке окна и ошибках аудио, и я нашел эти два маленьких жемчужины, которые содержали комментарии, связанные со звуковыми проблемами в различных версиях iOS:

http://themeforest.net/forums/thread/ios8-safari-breaks-windowload-info-for-authors/147825?page=1&message_id=1154236 (пользователь "tommusrhodus")

если у вас есть какие-либо теги или теги на вашей странице, то в настоящее время это будет нарушено в iOS8-сафари, которое никогда не запускает событие window.onload, если эти теги присутствуют в DOM.

https://github.com/codevise/pageflow/issues/118 (пользователь "lufes"):

Проблема связана с событием window.onload, которое не будет запускаться, если есть видео или аудио с установленным атрибутом preload="none". window.onload запускается после загрузки каждого ресурса, а iOS 8 продолжает ждать загрузки видео, что никогда не произойдет.

Так что решение для меня - поскольку я не хотел взламывать ядро ​​Wordpress - было просто полностью удалить атрибут preload через jQuery в готовом обратном вызове, который сработал бы до загрузки окна, например:

$("audio").removeAttr("preload");
Источник

Существует также обходной путь:

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

Это вызовет загрузку и "обманет" Safari на iOS8, чтобы думать, что $(window) объект был загружен, поэтому код внутри

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

буду работать.

Надеюсь, это поможет всем, кто ищет это:)

Источник

Я не могу найти причину, почему контроль не срабатывает window.onload событие. Но для тех, кто попадет в ту же проблему, я выкладываю здесь другой способ решения этой проблемы. (и, очевидно, я не хочу получать tumbleweed значок..)

  1. Я добавил большую часть JavaScript в коде позади (файл CS), который был внутри window.onload
  2. Как я вызываю функцию 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);
}

Это не полноценное решение проблемы, а работа. Если у кого-то есть причина или решение по этому вопросу, пожалуйста, оставьте сообщение в качестве ответа.

Источник
Другие вопросы по тегам