118

मेरे पास एक छिपा हुआ संपर्क फ़ॉर्म है जो एक बटन पर क्लिक करके तैनात किया गया है। इसके क्षेत्र CSS पृष्ठभूमि छवियों के रूप में सेट किए गए हैं, और वे हमेशा उस div की तुलना में थोड़ा बाद में प्रकट होते हैं जिसे toggled गया है।

मैं इस स्निपेट का उपयोग <head>अनुभाग में कर रहा था , लेकिन बिना किसी भाग्य के (मैंने कैश साफ़ करने के बाद):

<script>
$(document).ready(function() {
        pic = new Image();
        pic2 = new Image();
        pic3 = new Image();
        pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
        pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
        pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>

मैं अपने पुस्तकालय के रूप में jQuery का उपयोग कर रहा हूं, और अगर मैं इस मुद्दे को व्यवस्थित करने के लिए इसका उपयोग कर सकता हूं तो यह अच्छा होगा।

आपके विचार के लिए धन्यवाद।

— मूंगफली
स्रोत

कृपया, अपना कोड दिखाएं। आप इस फ़ॉर्म को कैसे टॉगल करेंगे?

— n1313

1

n1313, मैं सबसे सरल तरीके से संभव का उपयोग करता हूं: $ ('# टॉगल')। क्लिक करें (फ़ंक्शन () {$ ('# संपर्क')। SlideToggle ();});

— मूंगफली

257

केवल CSS का उपयोग करके चित्र लोड करना

नीचे दिए गए कोड में मैं बेतरतीब ढंग से bodyतत्व को चुन रहा हूं , क्योंकि यह पृष्ठ पर मौजूद होने की गारंटी देने वाले एकमात्र तत्वों में से एक है।

काम करने के लिए "ट्रिक" के लिए, हम उस contentसंपत्ति का उपयोग करेंगे जो आराम से कई URLs को लोड करने की अनुमति देता है , लेकिन जैसा कि दिखाया गया है, ::afterछद्म तत्व को छिपा कर रखा गया है ताकि चित्र प्रस्तुत न हों:

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg);   // load images
}

डेमो

HTTP अनुरोधों को कम करने के लिए स्प्राइट छवि का उपयोग करना बेहतर है ... (यदि कई अपेक्षाकृत छोटे आकार के चित्र हैं) और सुनिश्चित करें कि छवियां होस्ट की गई हैं जहां HTTP2 का उपयोग किया जाता है।

— vsync
स्रोत

27

यह कमाल का है!

— हेंजी जूल

4

अपनी सरलता, और शुद्ध CSS दृष्टिकोण के लिए अब तक की सर्वश्रेष्ठ तकनीक! वास्तव में एकमात्र दोष यह है कि इन छवियों को तुरंत दिखाई देने वाली सामग्री के रूप में एक ही समय में लोड किया जाता है, और जब तक कि मुख्य सामग्री लोड नहीं हो जाती, तब तक देरी नहीं होती है, जिसे जावास्क्रिप्ट की आवश्यकता होगी। लेकिन जब तक आप दर्जनों छवियों को प्रीलोड नहीं कर रहे हैं, तब तक यह डील-ब्रेकर नहीं होना चाहिए।

— बेंजामिन

2

यह CSS बटनों के लिए होवर संपत्तियों को प्री-लोड करने के लिए शानदार है और इस तरह - जब आप अपने बटन के ऊपर से कोई भी झिलमिलाहट प्राप्त नहीं करते हैं, जब परिसंपत्तियां लोड होती हैं

— रॉबर्ट पेट्ज़

16

अच्छा समाधान। मैं इसे लागू नहीं करने की सलाह bodyदूंगा, हालांकि, ये चित्र स्टाइलशीट के संदर्भ वाले प्रत्येक पृष्ठ पर लोड हो जाएंगे। इसके बजाय, आपको उपयोग करना चाहिए .contact_form:after {...}या कुछ अन्य वर्ग जो कम वैश्विक हैं। जब तक, निश्चित रूप से, आपका संपर्क फ़ॉर्म हर पृष्ठ पर है;)

— क्लाउडमैजिक

3

@vsync, यह समझ में आता है, विशेष रूप से gifs और छोटे reusables के लिए। मैं हाल ही में जिस स्थिति में आया था वह एक सामग्री समृद्ध हिंडोला के लिए बड़ी बीजी छवियों के लिए थी, और मैं निश्चित रूप से उन बड़ी फ़ाइलों को हर जगह लोड नहीं करना चाहता था :)

— क्लाउडमैजिक

30

मैं पुष्टि कर सकता हूं कि मेरा मूल कोड काम करता है। मैं गलत तरीके से एक छवि के साथ चिपके हुए था।

यहाँ एक परीक्षण है: http://paragraphe.org/slidetoggletest/test.html

<script>
    var pic = new Image();
    var pic2 = new Image();
    var pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>

— मूंगफली
स्रोत

सीएसएस-ओनली और इस समाधान के साथ कुछ परीक्षणों के बाद, मेरे मामले में विशेष रूप से, यह सबसे अच्छा है।

— ज़ेनिसिंहा-बीएसबी

— थैंक्स इट इटेस्टेस्ट

4

उत्तर में URL अब मान्य नहीं है।

— ब्रैंडन बक

नमस्ते, मैंने उस URL ( paragraphe.org/slidetoggletest/test.html ) पर सामग्री को फिर से अपलोड किया , इसे याद करने के लिए क्षमा करें। चीयर्स,

— मूंगफली

25

HTML <लिंक> टैग का उपयोग करके चित्र लोड करना

मेरा मानना है कि इस सवाल के अधिकांश आगंतुक "पेज के रेंडर शुरू होने से पहले मैं एक छवि को कैसे लोड कर सकते हैं" के उत्तर की तलाश कर रहे हैं। और इस समस्या का सबसे अच्छा समाधान <link>टैग का उपयोग कर रहा है क्योंकि <link>टैग पृष्ठ के आगे प्रतिपादन को अवरुद्ध करने में सक्षम है। प्रीमेप्टिव देखें

ये दो मूल्य विकल्प rel( वर्तमान दस्तावेज़ और जुड़े दस्तावेज़ के बीच संबंध ) विशेषता मुद्दे के साथ सबसे अधिक प्रासंगिक हैं:

प्रीफ़ैच : पेज रेंडरिंग करते समय दिए गए संसाधन को लोड करें
प्रीलोड : पेज रेंडरिंग शुरू होने से पहले दिए गए संसाधन को लोड करें

इसलिए यदि आप टैग के प्रतिपादन की प्रक्रिया शुरू होने से पहले एक संसाधन ( इस मामले में यह एक छवि है ) को लोड करना चाहते हैं <body>, तो उपयोग करें:

<link rel="preload" as="image" href="IMAGE_URL">

और यदि आप <body>रेंडर करते समय एक संसाधन लोड करना चाहते हैं, लेकिन आप इसे गतिशील रूप से बाद में उपयोग करने की योजना बना रहे हैं और उपयोगकर्ता को लोडिंग समय, उपयोग के साथ परेशान नहीं करना चाहते हैं:

<link rel="prefetch" href="RESOURCE_URL">

— mertyildiran
स्रोत

यह ध्यान देने योग्य है कि मोज़िला ब्राउज़र इंजन केवल तभी लोड होगा prefetchजब ब्राउज़र निष्क्रिय है, जो nsIWebProgressListenerएपीआई द्वारा निर्धारित किया गया है। अधिक जानकारी के लिए इसे देखें ।

— मैथ्यू बेकमैन

1

मुझे नहीं लगता है कि यह वास्तव में प्रतिपादन को अवरुद्ध करता है: w3c.github.io/preload "उदाहरण के लिए, एप्लिकेशन एक प्रारंभिक सीएसएस संसाधन के आरंभिक, उच्च-प्राथमिकता और गैर-रेंडर-ब्लॉक लाने वाले प्रीलोड कीवर्ड का उपयोग कर सकता है। उचित समय पर आवेदन द्वारा लागू किया जाए "

— माइकल क्रेंशॉ

1

@MichaelCrenshaw सही है, रेंडरिंग को ब्लॉक नहीं<link rel="preload"> करता है , मेरा मानना है कि लेखक ने परिभाषा को गलत समझा। एमडीएन प्रीलोडिंग कंटेंट से rel = "प्रीलोड" के साथ , "... जिसे आप पेज लाइफ़साइकल में जल्दी लोड करना शुरू करना चाहते हैं, इससे पहले कि ब्राउजर्स की मेन रेंडरिंग मशीनरी किक मारती है।" विचार यह है कि संसाधनों को जल्द से जल्द प्राप्त किया जाता है, जिससे यह अधिक संभावना बनती है कि संसाधन उपलब्ध है जब आवश्यक हो, उदाहरण के लिए जब कोई तत्व प्रतिपादन कर रहा हो। <img>

— एमडीएमॉवर

14

http://css-tricks.com/snippets/css/css-only-image-preloading/

तकनीक # 1

तत्व की नियमित स्थिति पर छवि को लोड करें, केवल इसे पृष्ठभूमि की स्थिति के साथ हटा दें। फिर इसे हॉवर पर प्रदर्शित करने के लिए पृष्ठभूमि की स्थिति को स्थानांतरित करें।

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

तकनीक # 2

यदि प्रश्न के तत्व में पहले से ही एक पृष्ठभूमि-छवि लागू है और आपको उस छवि को बदलने की आवश्यकता है, तो ऊपर काम नहीं करेगा। आमतौर पर आप यहां स्प्राइट के लिए जाते हैं (एक संयुक्त पृष्ठभूमि छवि) और बस पृष्ठभूमि की स्थिति को शिफ्ट करें। लेकिन अगर यह संभव नहीं है, तो यह प्रयास करें। पृष्ठभूमि छवि को किसी अन्य पृष्ठ तत्व पर लागू करें जो पहले से ही उपयोग में है, लेकिन पृष्ठभूमि छवि नहीं है।

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

— फतिह हैरियुलु
स्रोत

4

हमेशा बाहरी लिंक की सामग्री प्रदान करें। अन्यथा आपका जवाब बेकार है अगर लिंक टूट जाता है!

— एसएआर

@Fatih +1 बहुत अच्छे लिंक के लिए। 3 अलग-अलग तरीकों से लिंक किए गए लेख का अधिक वर्तमान संस्करण यहाँ है perishablepress.com/3-ways-preload-images-css-javascript-ajax

— xmojmr

@xmojmr आपके लिंक में कोई CSS-केवल समाधान नहीं हैं।

— मैक्स

10

इसके साथ प्रयास करें:

var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

इस कोड से आप बैकग्राउंड इमेज को प्री लोड करते हैं और लोड होने पर फॉर्म को रेंडर करते हैं

— mck89
स्रोत

mck89, धन्यवाद यह बहुत अच्छा लग रहा है। लेकिन, क्या मुझे इस कोड का उपयोग 'हेड' या इनलाइन के अंदर करना चाहिए? मेरा मतलब है, मुझे इसे html से भरना चाहिए?

— मूँगफली की

आप इसे सिर में अवश्य इस्तेमाल करें। मुझे लगता है कि आप इसे $ (दस्तावेज़) के अंदर उपयोग कर सकते हैं। पहले से ही

— mck89

6

सीएसएस के साथ सेट की गई पृष्ठभूमि की छवियों को प्रीलोड करने के लिए, सबसे कुशल उत्तर जो मैं आया था, कुछ कोड का एक संशोधित संस्करण था जो मैंने पाया कि काम नहीं किया:

$(':hidden').each(function() {
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});

इसका व्यापक लाभ यह है कि आपको भविष्य में नई पृष्ठभूमि छवियों को लाने पर इसे अपडेट करने की आवश्यकता नहीं है, यह नए लोगों को ढूंढेगा और उन्हें प्रीलोड करेगा!

— Deminetix
स्रोत

क्या मैं इसे सही ढंग से समझता हूं कि आप प्रत्येक छवि के लिए एक छिपा हुआ तत्व जोड़ते हैं? ऐसा नहीं है कि यह आपकी CSS फ़ाइल को छवियों के लिए सही स्कैन करने में सक्षम है? :)

— bvdb

5

यदि आप प्रपत्र इनपुट के लिए अपनी साइट पर कहीं और भी इन bg छवियों का पुनः उपयोग कर रहे हैं, तो आप शायद एक छवि स्प्राइट का उपयोग करना चाहते हैं। इस तरह से आप अपनी छवियों को प्रबंधित कर सकते हैं (pic1, pic2, pic3, etc ... के बजाय)।

स्प्राइट्स आम तौर पर क्लाइंट के लिए तेज़ होते हैं, क्योंकि वे केवल सर्वर से कई फ़ाइलों के बजाय एक (थोड़ी बड़ी) फ़ाइल का अनुरोध कर रहे हैं। अधिक लाभ के लिए SO लेख देखें:

सीएसएस छवि स्प्राइट

तो फिर, यह बिल्कुल भी उपयोगी नहीं हो सकता है यदि आप केवल एक फॉर्म के लिए इनका उपयोग कर रहे हैं और आप वास्तव में केवल उन्हें लोड करना चाहते हैं यदि उपयोगकर्ता संपर्क फ़ॉर्म का अनुरोध करता है ... हालांकि समझ में आ सकता है।

http://www.alistapart.com/articles/sprites

— ajhit406
स्रोत

हां, सीएसएस स्प्राइट्स जाने का रास्ता है। बस यह सुनिश्चित करें कि उस स्प्राइट में से एक चित्र छिपे हुए फॉर्म के लॉन्च होने से पहले दिखाई देता है (जैसे पेज लोड पर)।

— स्टीव

1

कैसे उस पृष्ठभूमि छवि लोड के बारे में कहीं छिपा हुआ है। इस तरह से इसे लोड किया जाएगा जब पेज खोला जाता है और किसी भी समय नहीं लिया जाता है जब एक बार फॉर्म को अजाक्स का उपयोग करके बनाया जाता है:

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}

— सैंटी
स्रोत

1

आप इस jQuery प्लगइन WaitForImage का उपयोग कर सकते हैं या आप छवियों को एक छिपे हुए div या (चौड़ाई: 0 और ऊँचाई: 0) में डाल सकते हैं और छवियों पर onload घटना का उपयोग कर सकते हैं।

यदि आपके पास केवल 2-3 छवियां हैं, तो आप घटनाओं को बांध सकते हैं और उन्हें एक श्रृंखला में ट्रिगर कर सकते हैं ताकि प्रत्येक छवि के बाद आप कुछ कोड कर सकें।

— user1236048
स्रोत

1

बेस64 का एकमात्र तरीका छवि को एनकोड करना है और इसे HTML कोड के अंदर रखना है ताकि छवि डाउनलोड करने के लिए इसे सर्वर से संपर्क करने की आवश्यकता न हो।

यह url से एक छवि को एन्कोड करेगा ताकि आप छवि फ़ाइल कोड को कॉपी कर सकें और अपने पेज में इसे सम्मिलित कर सकें ...

body {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

— mheager
स्रोत

2

यदि आप अपने CSS में फिर से उसी छवि का उपयोग करना चाहते हैं ... तो इसे कैश नहीं किया जाएगा और आपको इसे फिर से लोड करना होगा।

— vsync

1

जब के लिए सीएसएस नियमों के साथ सीएसएस कोड और प्रीलोड छवियों को संशोधित करने का कोई तरीका नहीं है :beforeया :afterछद्म तत्वों लोड स्टाइलशीट के जावा स्क्रिप्ट कोड traversing सीएसएस नियमों के साथ एक और तरीका इस्तेमाल किया जा सकता है। इसे काम करने के लिए स्क्रिप्ट को HTML में स्टाइलशीट के बाद शामिल किया जाना चाहिए , उदाहरण के लिए, bodyटैग बंद करने से पहले या स्टाइलशीट के बाद।

getUrls() {
    const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/;

    let urls = [];
    for (let i = 0; i < document.styleSheets.length; i++) {
        let cssRules = document.styleSheets[i].cssRules;
        for (let j = 0; j < cssRules.length; j++) {
            let cssRule = cssRules[j];
            if (!cssRule.selectorText) {
                continue;
            }

            for (let k = 0; k < cssRule.style.length; k++) {
                let property = cssRule.style[k],
                    urlMatch = cssRule.style[property].match(urlRegExp);
                if (urlMatch !== null) {
                    urls.push(urlMatch[2]);
                }
            }
        }
    }
    return urls;
}

preloadImages() {
    return new Promise(resolve => {
        let urls = getUrls(),
            loadedCount = 0;

        const onImageLoad = () => {
            loadedCount++;
            if (urls.length === loadedCount) {
                resolve();
            }
        };

        for (var i = 0; i < urls.length; i++) {
            let image = new Image();
            image.src = urls[i];
            image.onload = onImageLoad;
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    preloadImages().then(() => {
        // CSS images are loaded here
    });
});

— Ezze
स्रोत

0

यदि पृष्ठ तत्व और उनकी पृष्ठभूमि छवियां पहले से ही डोम में हैं (यानी आप उन्हें गतिशील रूप से नहीं बना / बदल रहे हैं), तो उनकी पृष्ठभूमि छवियां पहले से ही लोड हो जाएंगी। उस बिंदु पर, आप संपीड़न विधियों को देखना चाह सकते हैं :)

mmmm ... अच्छा बिंदु cpharmston, और यह बताता है कि क्यों यह समस्या बनी हुई छवियों के साथ भी बनी रहती है। तो, इसका मतलब है कि कोई वर्कअराउंड नहीं है?

— मूंगफली

छोटी छवियां बनाएं! JPEGs आसानी से संपीड़ित होते हैं, PNGs ( pmt.sourceforge.net/pngcrush ) के आकार को कम करने के लिए कमांड लाइन उपकरण हैं , और आप GIF के आकार को कम करने के लिए छवि में रंगों की संख्या कम कर सकते हैं। बेशक, आप तेज़ इंटरनेट सेवा के लिए भी वसंत कर सकते हैं;)

CSS Images को प्रीलोड करना

केवल CSS का उपयोग करके चित्र लोड करना

डेमो

HTML <लिंक> टैग का उपयोग करके चित्र लोड करना