Предотвращение повторной инициализации страниц в jQuery mobile при перемещении между вкладками

Question

Предотвращение повторной инициализации страниц в jQuery mobile при перемещении между вкладками

0

На моем мобильном сайте у меня есть пара страниц, с вкладкой navbar внизу, позволяя пользователям перемещаться между ними. На одной из страниц у меня есть холст, на котором пользователи могут рисовать. Проблема в том, что каждый раз, когда я перехожу на одну страницу, а затем обратно на страницу холста, я вижу старый рисунок на секунду, но потом он очищается.

Я думаю, что это вызвано из-за повторной инициализации страницы каждый раз, когда я ввожу ее, так как это можно предотвратить?

Я уже пробовал кэшировать страницы, но почему-то не помог... Какие-нибудь другие идеи?

byteSlayer 10 нояб. 2013, в 23:43

Источник

0

как насчет сброса холста на странице до шоу . Похоже, вы начинаете на странице с холстом, затем идете куда-то еще (когда ваша страница холста все еще находится в DOM), а когда вы возвращаетесь, ваша первая страница холста отображается «как есть», прежде чем обновлять ее?
frequent 11 нояб. 2013, в 09:01
0

да. Есть ли способ предотвратить это?
byteSlayer 11 нояб. 2013, в 19:35
0

смотри мой ответ ниже
frequent 11 нояб. 2013, в 20:44

Показать ещё 1 комментарий

Теги:

jquery

canvas

initialization

html5-canvas

jquery-mobile

1 ответ

Ещё вопросы

как насчет сброса холста на странице до шоу . Похоже, вы начинаете на странице с холстом, затем идете куда-то еще (когда ваша страница холста все еще находится в DOM), а когда вы возвращаетесь, ваша первая страница холста отображается «как есть», прежде чем обновлять ее?
да. Есть ли способ предотвратить это?

frequent · Answer 1 · 2013-11-11T19-25-00.000Z

Вы должны очистить холст от jQuery mobile pagebeforeshow.

Первая страница, к которой пользователь переходит, всегда будет находиться в DOM, поэтому, если эта страница содержит холст, а пользователь переходит на другую страницу и обратно, вам придется сбросить элемент холста вручную.

Этот вопрос показывает, как сбросить холст - как очистить холст для перерисовки.

Поэтому ваш код должен выглядеть примерно так:

$(document).on("pagebeforeshow", "div.id_or_class_of_page(s)_with_canvas", function () {
    ctx = _your_canvavs_element;

    ctx.save();
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    ctx.restore();
});

Не уверен относительно кода холста.

Так нужно ли мне взять изображение холста, а затем восстановить его, как только пользователь вернется на страницу?