खाली छवि को डेटा-यूरी

Question

के रूप में एन्कोड किया गया है मैंने एक छवि स्लाइडर बनाया है (भयानक bxSlider पर आधारित) जो दृश्य में स्लाइड करने से पहले छवियों को प्रीलोड कर देगा। यह पहले से ही बहुत अच्छी तरह से काम कर रहा है, लेकिन मुझे नहीं लगता कि मेरा समाधान वैध HTML है।

मेरी तकनीक निम्नानुसार है: मैं सामान्य स्लाइड छवि के साथ स्लाइडर मार्कअप उत्पन्न करता हूं (<img src="foo.jpg"> के साथ) और बाद की छवियों को <img data-orig="bar.jpg"> जैसे डेटा एट्रिब्यूट में संदर्भित किया जा रहा है। एक जावास्क्रिप्ट तब आवश्यक होने पर data-orig -> src परिवर्तन को जॉगल करता है, प्रीलोडिंग को ट्रिगर करता है।

दूसरे शब्दों में, मेरे पास है:

<div class="slider"> 
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div> 

खाली src="" गुण (जो some browsers में harmful to performance कर रहे हैं) से बचने के लिए, मैं src="data:" डाला है प्रभावी रूप से एक प्लेसहोल्डर के रूप में एक खाली छवि डालने के लिए।

बात यह है कि, मुझे documentation for data-URI में कुछ भी नहीं लगता है कि यह एक वैध डेटा-यूआरआई है या नहीं। मैं मूल रूप से न्यूनतम डेटा-यूआरआई चाहता हूं जो एक खाली/पारदर्शी छवि का समाधान करता है, इसलिए ब्राउज़र तुरंत स्रोत को हल कर सकता है और आगे बढ़ सकता है (बिना त्रुटि या नेटवर्क अनुरोध के)। शायद src="data:image/gif;base64," बेहतर होगा?

Answer 1

मैं इस पर देखा और smallest possible transparent GIF image के लिए अतिरिक्त बाइट्स, एक डेटा के रूप में एन्कोड

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

जो अब मैं क्या उपयोग कर रहा हूँ: -uri, इस था।

Answer 2

आप की जरूरत है, तो एक पारदर्शी छवि 1x1 पिक्सेल सिर्फ src डिफ़ॉल्ट विशेषता

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw== 

के रूप में इस डेटा uri सेट इस बजाय चित्र 1x1 सफेद के लिए एक बेस 64 एन्कोडिंग है

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw== 

अन्यथा आप सेट कर सकते हैं data:null और बचाने ~ 60 प्रत्येक छवि

Answer 3

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA= 

छोटा होता है: डी

Answer 4

फ़ैब्रिज़ियो की "सफेद gif" वास्तव में पूरी तरह से सफेद नहीं है: यह rgb(254, 255, 255) है।

मैं this page पर पाया गया निम्न (जो छोटा होता है) का उपयोग करता हूं।

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs= 

Answer 5

1px 1px JPEG छवि से

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q== 

Answer 6

छोटी से छोटी मैंने कभी

डेटा को देखा है: image/gif; बेस 64, R0lGODlhAQABAAAAACw =

Answer 7

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/> 

मान्य और अत्यधिक संपीड़ित। पृष्ठ में एक और इनलाइन svg अगर अनिवार्य रूप से मुक्त है।