118

আমার একটি গোপন যোগাযোগের ফর্ম রয়েছে যা একটি বোতামে ক্লিক করে স্থাপন করা হয়। এর ক্ষেত্রগুলি CSS ব্যাকগ্রাউন্ড চিত্র হিসাবে সেট করা আছে এবং সেগুলি টগল করা ডিভের চেয়ে কিছুটা পরে পরে আসে always

আমি <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, আমি সম্ভাব্যতম সহজ উপায়টি ব্যবহার করছি: $ ('# টগল') click ক্লিক করুন (ফাংশন () {$ ('# পরিচিতি') sl

— চিনাবাদাম

257

কেবল সিএসএস ব্যবহার করে চিত্রগুলি প্রিললোড হচ্ছে

নীচের কোডে আমি এলোমেলোভাবে bodyউপাদানটি নির্বাচন করছি , যেহেতু এটি পৃষ্ঠায় বিদ্যমান গ্যারান্টিযুক্ত একমাত্র উপাদান।

"কৌশল" কাজ করার জন্য, আমরা সেই contentসম্পত্তিটি ব্যবহার করব যা স্বাচ্ছন্দ্যে একাধিক URL গুলি লোড করার অনুমতি দেয় , তবে যেমনটি দেখানো হয়েছে, ::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

এর সরলতা এবং খাঁটি সিএসএস পদ্ধতির জন্য এখনও অবধি সেরা কৌশল! প্রকৃতপক্ষে একমাত্র ত্রুটিটি হ'ল এই চিত্রগুলি তত্ক্ষণাত্ দৃশ্যমান সামগ্রী হিসাবে একই সময়ে লোড হয় এবং মূল সামগ্রীটি লোড হওয়ার পরেও দেরী হয় না, যার জন্য জাভাস্ক্রিপ্টের প্রয়োজন হয়। আপনি যতক্ষণ না কয়েক ডজন চিত্রকে লোড করছেন, এটি কোনও ডিল-ব্রেকার হওয়া উচিত নয়।

— বেনিয়ামিন

2

এটি সিএসএস বোতামগুলির জন্য হভার সম্পদগুলি আগে লোড করার জন্য দুর্দান্ত

— রবার্ট পেটজ

16

ভাল সমাধান। bodyযদিও আমি এটি প্রয়োগ না করার পরামর্শ দেব , কারণ এই চিত্রগুলি স্টাইলশিটের উল্লেখ করে এমন প্রতিটি পৃষ্ঠাতে লোড হবে। পরিবর্তে, আপনার .contact_form:after {...}বা অন্য কোনও শ্রেণীর ব্যবহার করা উচিত যা কম বৈশ্বিক। অবশ্যই, যদি না আপনার যোগাযোগ ফর্মটি প্রতিটি পৃষ্ঠায় থাকে;)

— ক্লাউডম্যাগিক

3

@vsync, এটি বিশেষত জিআইএফ এবং ছোট পুনঃব্যবহারযোগ্যদের জন্য অর্থবোধ করে। সাম্প্রতিক আমি যে পরিস্থিতিটি দেখতে পেয়েছি তা হ'ল একটি বিগ ইমেজগুলির জন্য একটি সামগ্রী সমৃদ্ধ

— কারাউসেলের

30

আমি নিশ্চিত করতে পারি যে আমার আসল কোডটি কাজ করছে বলে মনে হচ্ছে। আমি দুর্ঘটনাক্রমে একটি ভুল পথ সহ একটি চিত্র আটকে ছিল।

এখানে একটি পরীক্ষা: http://paragraphe.org/slidetoggletest/test.html ml

<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>

— চিনাবাদাম
সূত্র

সিএসএস-কেবলমাত্র এই সমাধানের সাথে কয়েকটি পরীক্ষার পরে, বিশেষত আমার ক্ষেত্রে, এটি সেরা।

— zequinha-bsb

ধন্যবাদ এর সর্বকালের সহজ :)

— বিটা কোডার

4

উত্তরের URL টি আর বৈধ নয়।

— ব্র্যান্ডন বাক

হাই, আমি এই ইউআরএলগুলিতে সামগ্রীগুলি পুনরায় আপলোড করেছি ( paragraphe.org/slidetoggletest/test.html ), এটি মিস করার জন্য দুঃখিত। চিয়ার্স,

— চিনাবাদাম

25

এইচটিএমএল <লিঙ্ক> ট্যাগ ব্যবহার করে প্রিলোডিং চিত্রগুলি

আমি বিশ্বাস করি এই প্রশ্নের বেশিরভাগ দর্শক "পৃষ্ঠার রেন্ডার শুরুর আগে কীভাবে একটি চিত্র প্রিললোড করতে পারি?" এবং এই সমস্যার সর্বোত্তম সমাধানটি <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

@ মিশেলক্রেনশো সঠিক, রেন্ডারিংয়ে বাধা <link rel="preload">দেয় না , আমি বিশ্বাস করি লেখক সংজ্ঞাটি ভুল বুঝেছিলেন। এমডিএন প্রিলোডিং সামগ্রী সাথে rel = "প্রিলোড" , "... যা আপনি ব্রাউজারের প্রধান রেন্ডারিং মেশিনারি কিক্স ইন করার আগে পৃষ্ঠা লাইফসাইকের শুরুতে লোড শুরু করতে চান।" ধারণাটি হ'ল সংস্থানগুলি যত তাড়াতাড়ি সম্ভব আনা হবে, এটি প্রয়োজনীয়তার জন্য প্রয়োজনীয় সংস্থানটি উপলব্ধ হওয়ার সম্ভাবনা তৈরি করে, উদাহরণস্বরূপ যখন কোনও <img>উপাদান রেন্ডারিং হয়।

— MDMower

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

সর্বদা বাহ্যিক লিঙ্কগুলির সামগ্রী সরবরাহ করুন। নইলে আপনার উত্তরটি মূল্যহীন যদি লিঙ্কটি ভেঙে যায়!

— শ্রা

@ ফাতিহ +1 খুব ভাল লিঙ্কের জন্য। 3 পৃথক উপায়ে

— লিঙ্কিত

@xmojmr আপনার লিঙ্কটিতে কোনও সিএসএস-সমাধান নেই।

— সর্বাধিক

10

এটি দিয়ে চেষ্টা করুন:

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

এই কোডের সাহায্যে আপনি ব্যাকগ্রাউন্ড চিত্রটি পূর্ব লোড করুন এবং ফর্মটি লোড হয়ে গেলে রেন্ডার করুন

— mck89
সূত্র

mck89, ধন্যবাদ এটি দেখতে বেশ ভাল লাগছে। তবে, আমি কি এই কোডটি 'মাথা' বা ইনলাইন এর ভিতরে ব্যবহার করব? মানে, আমি কি এটি এইচটিএমএল দিয়ে পূরণ করব?

— চিনাবাদাম

আপনার এটি অবশ্যই মাথায় ব্যবহার করা উচিত। আমি মনে করি আপনি এটি $ (দস্তাবেজ) এর অভ্যন্তরে ব্যবহার করতে পারবেন। প্রস্তুত

— mck89

6

সিএসএসের সাহায্যে ব্যাকগ্রাউন্ড চিত্রগুলি সেট করা প্রিলোডিংয়ের জন্য, আমি যে সর্বাধিক দক্ষ উত্তরটি নিয়ে এসেছি তা হ'ল এমন কোনও কোডের একটি পরিবর্তিত সংস্করণ যা আমি পেয়েছি তা কার্যকর হয়নি:

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

এর বিশাল সুবিধা হ'ল আপনি যখন ভবিষ্যতে নতুন ব্যাকগ্রাউন্ড চিত্র আনবেন তখন আপনাকে এটি আপডেট করার দরকার নেই, এটি নতুনগুলি খুঁজে পাবে এবং সেগুলি প্রিললোড করে!

— Deminetix
সূত্র

আমি কি এটি সঠিকভাবে বুঝতে পারি যে আপনি প্রতিটি চিত্রের জন্য কোনও গোপন উপাদান যুক্ত করেছেন? এটি ঠিক নয় যে এটি ঠিক আপনার চিত্রগুলির জন্য সিএসএস ফাইল স্ক্যান করতে সক্ষম? :)

— bvdb

5

আপনি যদি এই বিজি চিত্রগুলি ফর্ম ইনপুটগুলির জন্য আপনার সাইটের অন্য কোথাও পুনরায় ব্যবহার করছেন, আপনি সম্ভবত একটি চিত্রের স্প্রিট ব্যবহার করতে চান। এইভাবে আপনি আপনার চিত্রগুলি কেন্দ্রীয়ভাবে পরিচালনা করতে পারেন (পিক 1, পিক 2, পিক 3 ইত্যাদি পরিবর্তে)।

স্প্রেটগুলি ক্লায়েন্টের জন্য সাধারণত দ্রুত হয়, যেহেতু তারা একাধিক ফাইলের পরিবর্তে সার্ভার থেকে কেবল একটি (কিছুটা বড় হলেও) ফাইলের জন্য অনুরোধ করে। আরও বেনিফিটের জন্য এসও নিবন্ধটি দেখুন:

সিএসএস ইমেজ স্প্রিটস

এরপরে, আপনি যদি এগুলি কেবল একটি ফর্মের জন্য ব্যবহার করেন এবং ব্যবহারকারী যদি যোগাযোগের ফর্মের জন্য অনুরোধ করে তবে আপনি সত্যিই এগুলি লোড করতে চান তবে এটি সম্ভবত কার্যকর হতে পারে না।

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

— ajhit406
সূত্র

হ্যাঁ, সিএসএস স্প্রাইটস যাবার উপায়। কেবল নিশ্চিত হয়ে নিন যে সেই স্প্রাইটের চিত্রগুলির মধ্যে একটি লুকানো ফর্মটি চালু করার আগে উপস্থিত হয়েছিল (পৃষ্ঠা লোডের মতো)।

— স্টিভ

1

কোথাও লুকানো সেই ব্যাকগ্রাউন্ড চিত্রটি লোড করার বিষয়ে। এই পৃষ্ঠাটি খোলার পরে লোড হবে এবং এজ্যাক্স ব্যবহার করে ফর্মটি তৈরি হওয়ার পরে কোনও সময় লাগবে না:

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

— শান্তি
সূত্র

1

আপনি এই jQuery প্লাগইন ওয়েটফোর ইমেজটি ব্যবহার করতে পারেন বা আপনি কোনও চিত্রকে কোনও লুকানো ডিভি বা (প্রস্থ: 0 এবং উচ্চতা: 0) এ রাখতে পারেন এবং চিত্রগুলিতে অনলোডের ইভেন্টটি ব্যবহার করতে পারেন।

যদি আপনার কাছে কেবল ২-৩ টি চিত্র থাকে তবে আপনি ইভেন্টগুলি বাঁধতে এবং একটি চেইনে এটিকে ট্রিগার করতে পারেন যাতে প্রতিটি চিত্রের পরে আপনি কিছু কোড করতে পারেন।

— user1236048
সূত্র

1

একমাত্র উপায় হ'ল বেস 64 ইমেজটি এনকোড করা এবং এটি এইচটিএমএল কোডের মধ্যে স্থাপন করা যাতে এটি চিত্র ডাউনলোড করতে সার্ভারের সাথে যোগাযোগের প্রয়োজন না হয়।

এটি ইউআরএল থেকে একটি চিত্র এনকোড করবে যাতে আপনি চিত্র ফাইলের কোডটি অনুলিপি করতে পারেন এবং আপনার পৃষ্ঠায় এটি inোকাতে পারেন ...

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

— mheager
সূত্র

2

আপনি যদি নিজের সিএসএসে আবার একই চিত্র ব্যবহার করতে চান ... এটি ক্যাশে হবে না এবং আপনাকে এটি আবার লোড করতে হবে।

— vsync

1

সিএসএস কোড সংশোধন করার এবং সিএসএস নিয়মের সাথে চিত্রগুলি প্রিললোড করার উপায় নেই :beforeবা :afterসিউডো উপাদানগুলির জন্য জাভাস্ক্রিপ্ট কোড সহ লোড স্টাইলশিটের সিএসএস বিধিগুলিকে অনুসরণ করে এমন আরেকটি পদ্ধতি ব্যবহার করা যেতে পারে। এটিকে কার্যকারী করার জন্য স্ক্রিপ্টগুলি 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

যদি পৃষ্ঠার উপাদানগুলি এবং তাদের পটভূমি চিত্রগুলি ইতিমধ্যে ডোমে থাকে (যেমন আপনি এগুলি পরিবর্তনশীলভাবে তৈরি / পরিবর্তন করছেন না), তবে তাদের পটভূমির চিত্রগুলি ইতিমধ্যে লোড হবে। এই মুহুর্তে, আপনি সংক্ষেপণ পদ্ধতিগুলি দেখতে চাইতে পারেন :)

মিমি মিমি ... ভাল পয়েন্ট সিফর্মস্টন, এবং এটি ব্যাখ্যা করে যে কেন চিত্রগুলি ক্যাশে করা সত্ত্বেও সমস্যাটি স্থির থাকে। সুতরাং, তার মানে কি কোনও কর্মফল নেই?

— চিনাবাদাম

আরও ছোট ছবি তৈরি করুন! জেপিইজিগুলি সহজেই সংকুচিত হয়, পিএনজির আকার হ্রাস করার জন্য কমান্ড লাইন সরঞ্জাম রয়েছে ( pmt.sourceforge.net/pngcrush ), এবং আপনি জিআইএফগুলির আকার হ্রাস করতে চিত্রের বর্ণের সংখ্যা হ্রাস করতে পারেন। অবশ্যই, আপনি দ্রুত ইন্টারনেট পরিষেবার জন্যও বসন্ত

সিএসএস চিত্রগুলি প্রিললোড করা হচ্ছে

কেবল সিএসএস ব্যবহার করে চিত্রগুলি প্রিললোড হচ্ছে

ডেমো

এইচটিএমএল <লিঙ্ক> ট্যাগ ব্যবহার করে প্রিলোডিং চিত্রগুলি