Медленный ответ на событие click на iPad

Я сделал демонстрацию концепции фотографии, которая переключает между двумя изображениями, чтобы показать разницу между ними.

У меня есть событие onMouseClick, которое отлично работает, за исключением iPad. Ответ мгновен на моем рабочем столе, но довольно отложен на планшете, возможно, 500 мс?

Это нормально? Есть ли другой способ справиться с этим?

JavaScript:

var img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";

var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";


function test() {
    if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg';
    }
    else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg';
    }
}​

Тело

 <div>
   <table id="table-1" >
   <tr><td>
      <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/>
       <img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/>
Click on the image above to toggle between 19mm and 200mm <br>
   </td></tr>
   </table>
</div>
​

Также на jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/

Ответы

Ответ 1

iOS целенаправленно задерживает события щелчка, чтобы жесты/прокрутка работали правильно. Например, когда вы касаетесь элемента, вы можете прокрутить всю страницу, а не загорать событие щелчка на элементе. Чтобы добиться более тонкого контроля, используйте события касания.

Смотрите: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Пример с помощью touchstart: http://jsfiddle.net/R4pey/7/.

Обратите внимание, что захват событий касания имеет последствия, например. вы можете отменить поведение, которое ожидает пользователь (например, прокрутка).

Также обратите внимание, что вы обычно привязываете свои события независимо от разметки (не встроенные), чтобы добиться более четкого разделения разметки и script.

Здесь приведен пример с использованием jQuery, который связывает события отдельно от разметки и обрабатывает события click и touchstart. Протестировано в Chrome 21, FF 15, IE9 и iPad 3.

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";

// preload from original code
var img1 = new Image();
img1.src = url1;

var img2 = new Image();
img2.src = url2;

// bind the click and touchstart events
$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 

    // When touch event fires, this is needed to prevent the click
    // event from firing as well as @RyanWheale noted in the comments.
    e.preventDefault(); 
});

Ответ 3

Реализовать обработчики событий afterhend

В отличие от нажмите и touchstart, события touchhend запускаются мгновенно без задержки в 300 мс. Это может быть практичным, если вы разрабатываете сенсорную WebGL или основанную на холсте игру, однако вы не можете полагаться исключительно на touchhend на стандартных веб-страницах.

$('#id').on('touchstart',function(e) {                

    //code here...

});

Ответ 4

У меня возникли некоторые проблемы с изображениями на устройствах IOS. Например, я использую градиенты HTML5 и тени (также изображения) на своем сайте и замечаю огромную разницу в ответах при удалении изображений.

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

Я использовал iPad3 для тестирования. Парень написал интересную статью о проблемах с изображениями на IOS.

См: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/