आईपैड

Question

पर क्लिक इवेंट पर धीमी प्रतिक्रिया मैंने एक फोटो अवधारणा का एक डेमो बनाया जो दो छवियों के बीच टॉगल करता है ताकि उनके बीच अंतर दिखाई दे सके।

मुझे आईपैड को छोड़कर ठीक काम करता है। प्रतिक्रिया मेरे डेस्कटॉप पर तुरंत है, लेकिन टैबलेट पर शायद देरी हो रही है, शायद 500ms?

क्या यह सामान्य है? क्या मैं इसे संभालने का एक और तरीका है?

जावास्क्रिप्ट:

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/

Answer 1

आईओएस उद्देश्यपूर्ण क्लिक ईवेंट ताकि इशारों/स्वाइप काम सही ढंग से विलंब। उदाहरण के लिए, जब आप किसी तत्व को स्पर्श करते हैं तो आप पूरे पृष्ठ को स्क्रॉल करना चाहते हैं, किसी तत्व पर क्लिक ईवेंट को आग नहीं लगा सकते हैं। बेहतर अनाज नियंत्रण प्राप्त करने के लिए, स्पर्श घटनाओं का उपयोग करें।

देखें: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

उदाहरण touchstart का उपयोग कर: http://jsfiddle.net/R4pey/7/।

ध्यान दें कि स्पर्श घटनाओं को कैप्चर करने के परिणाम हैं, उदा। आप उस व्यवहार को ओवरराइड कर सकते हैं जिसे उपयोगकर्ता अपेक्षा करता है (जैसे स्वाइप करना)।

यह भी ध्यान रखें कि आपको आमतौर पर मार्कअप और स्क्रिप्ट के क्लीनर अलगाव को प्राप्त करने के लिए अपने मार्कअप (इनलाइन नहीं) से स्वतंत्र रूप से अपनी घटनाओं को बांधना चाहिए।

Here's an example jQuery का उपयोग करके जो घटनाओं को मार्कअप से अलग करता है, और click और touchstart ईवेंट दोनों को संभालता है। क्रोम 21, एफएफ 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(); 
}); 

Answer 2

परीक्षण किया गया मैं IOS उपकरणों पर छवियों के साथ कुछ समस्याओं का सामना करना पड़ा। उदाहरण के लिए मैं अपनी साइट पर एचटीएमएल 5 ग्रेडियेंट्स और छाया (छवियों) का उपयोग करता हूं और छवियों को हटाते समय एक बड़ा प्रतिक्रिया अंतर देखा।

संलग्न क्लिक ईवेंट ठीक काम कर रहा है लेकिन प्रतिक्रिया धीमी है क्योंकि सफारी छवियों के साथ व्यस्त दिखती है (इसे लगातार दोहराती है)।

मैंने इसका परीक्षण करने के लिए एक आईपैड 3 का उपयोग किया। एक लड़के ने आईओएस पर छवि समस्याओं के बारे में एक दिलचस्प लेख लिखा है।

देखें: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

Answer 3

जांच तेजी से और उत्तरदायी बटन के लिए नीचे दिए गए लिंक: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

Answer 4

लागू touchend ईवेंट हैंडलर्स

क्लिक और touchstart विपरीत, touchend घटनाएं आग लगती हैं 300 एमएमएस देरी के तुरंत बाद डी। यह व्यावहारिक हो सकता है यदि आप एक स्पर्श-केवल वेबजीएल या कैनवास-आधारित गेम विकसित कर रहे हैं, हालांकि, आप मानक वेब पृष्ठों में पूरी तरह से टचेंड पर भरोसा नहीं कर सकते हैं।

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

    //code here... 

});