Wp-rocket: LazyLoad और JetPack इमेज ब्लॉक कम्पैटिबिलिटी की तुलना करें

को निर्मित 3 दिस॰ 2020 · 4टिप्पणियाँ · स्रोत: wp-media/wp-rocket

कोई समस्या सबमिट करने से पहले कृपया जांच लें कि आपने निम्न चरणों को पूरा कर लिया है:

सुनिश्चित करें कि आप नवीनतम संस्करण पर हैं - हाँ
यह सुनिश्चित करने के लिए खोज सुविधा का उपयोग किया जाता है कि बग की रिपोर्ट पहले नहीं की गई है -हाँ

बग का वर्णन करें
जेटपैक के साथ जोड़े जाने पर छवियाँ प्रदर्शित नहीं की जा रही हैं छवि ब्लॉक की तुलना करें।
मार्कअप कट जाता है, इसलिए जब मैं तत्व का निरीक्षण करता हूं तो केवल पिक्सेल एसवीजी दिखाई देता है, लेकिन छवि स्रोत नहीं।
स्क्रीनशॉट:
LazyLoad अक्षम के साथ: https://jmp.sh/O7wBHsF
LazyLoad सक्षम होने के साथ: https://jmp.sh/ZOZZB7N

प्रजनन करना
व्यवहार को पुन: पेश करने के लिए कदम:

इमेज ब्लॉक की तुलना करके एक पोस्ट बनाएं।
WP रॉकेट में LazyLoad सक्षम करें
पृष्ठ खोलें और चित्र यहां स्क्रीनशॉट की तरह प्रदर्शित नहीं होते हैं: https://jmp.sh/RrOeolq

अपेक्षित् व्यवहार
छवियों को यहां प्रदर्शित किया जाना है: https://jmp.sh/14xZcAi

वर्तमान समाधान
LazyLoad विकल्प से वर्ग का नाम class="image-compare बहिष्कृत करें।
एलएल लागू होने से पहले सोर्स कोड में मार्कअप को ब्लॉक करें :

अतिरिक्त संदर्भ
तुलना ब्लॉक जेटपैक आलसी-लोड और वर्डप्रेस कोर आलसी-लोड के साथ काम करता है क्योंकि छवियों को वास्तव में आलसी लोड नहीं किया जा रहा है, यानी बाहर रखा गया है।

संबंधित टिकट: https://secure.helpscout.net/conversation/1351509800/217772/
सुस्त: https://wp-media.slack.com/archives/G01BGNQU7AP/p1606920475010500

संभवतः इस LazyLoad बहिष्करण को स्वचालित रूप से जोड़ना हमारी ओर से एक समाधान होगा?
या अनुकूलता JetPack द्वारा की जानी चाहिए?

बैकलॉग ग्रूमिंग (केवल WP मीडिया देव टीम के उपयोग के लिए)

[] समस्या को पुन: उत्पन्न करें
[ ] मूल कारण की पहचान करें
[ ] समाधान का दायरा
[ ] प्रयास का अनुमान लगाएं

[XS] lazyload medium bug

स्रोत

NataliaDrause

सबसे उपयोगी टिप्पणी

@arunbasillal मेरे दृष्टिकोण से, मैं कुछ ही मिनटों में QA शुरू करने जा रहा हूँ

piotrbak 15 जन॰ 2021

🚀2

सभी 4 टिप्पणियाँ

समस्या को फिर से प्रस्तुत करें

स्थानीय परीक्षण स्थल पर पुन: प्रस्तुत किया गया

मूल कारण की पहचान करें

प्लगइन से उत्पन्न कोड ही सही है, जैसा कि स्रोत कोड में देखा जा सकता है:

<img id="1756" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20801'%3E%3C/svg%3E" alt="" width="801" height="801" class="image-compare__image-before" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg"/>
<noscript>
    <img id="1756" src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg" alt="" width="801" height="801" class="image-compare__image-before"/>
</noscript>
<img id="1757" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20800'%3E%3C/svg%3E" alt="" width="801" height="800" class="image-compare__image-after" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg"/>
<noscript>
    <img id="1757" src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg" alt="" width="801" height="800" class="image-compare__image-after"/>
</noscript>

समस्या तब हो रही है जब तुलना स्क्रिप्ट शुरू होती है, और आलसी लोडेड मार्कअप के साथ सही ढंग से काम नहीं करती है।

समाधान का दायरा

image-compare__ को RocketLazyload\Images::getExcludedAttributes() में बहिष्करण में जोड़ने से उन छवियों को आलसी लोड से बाहर कर दिया जाएगा और समस्या का समाधान किया जाएगा।

सत्यापन और प्रतिगमन रोकथाम के लिए इस स्थिरता डेटा को हमारे स्वचालित परीक्षणों में जोड़ा जा सकता है।

प्रयास का अनुमान लगाएं

प्रयास [XS]

Tabrisrp 17 दिस॰ 2020

संबंधित: https://secure.helpscout.net/conversation/1372584429/224759/
बहिष्करण सूची में image-compare__ जोड़ने से समस्या का समाधान हो गया।

NataliaDrause 28 दिस॰ 2020

@ engahmeds3ed @piotrbak यह अगले सप्ताह रिलीज के लिए 3.8.3 के लिए तैयार हो सकता है? क्या मैं मील का पत्थर अपडेट करूं?

arunbasillal 15 जन॰ 2021

👍1