কীভাবে কেবল হভার ব্যবহার করে চিত্রগুলি প্রাক-লোড করবেন?

14

আমার একটি লিঙ্ক রয়েছে যা একটি পটভূমির চিত্র দিয়ে শুরু হয় এবং তারপরে অন্যটিতে হোভারে পরিবর্তন হয়। উভয় ব্যাকগ্রাউন্ড চিত্রগুলি সিএসএসে সেট করা আছে। আমার ব্রাউজারগুলি (এর মধ্যে কোনওটি) হওর চিত্রটি লোড করবে বলে মনে হচ্ছে না যতক্ষণ না আপনি আসলে ঘোরাবেন। তবে আপনি বেশ কয়েক সেকেন্ডের জন্য একটি ফাঁকা চিত্র নিয়ে শেষ করেন (আমার খুব ধীর সংযোগে) এটি নতুনটি লোড করতে লাগে। হোভার চিত্রটি প্রাক-লোড করার জন্য ব্রাউজারকে উত্সাহিত করার কোনও উপায় আছে যাতে হোভারে বিলম্বের সময়টি না ঘটে?

css images load-time

— ড্যানিয়েল বিঙ্গহাম
সূত্র

17

1) সিএসএস স্প্রাইট ব্যবহার করুন (এটি পছন্দসই পদ্ধতি)।

2) চিত্রগুলি একটি লুকানো ডিভিডে লোড করুন। চিত্রগুলিকে ডিভের মধ্যে রাখুন এবং তারপরে display: none;এটি লুকানোর জন্য ডিভির সিএসএস সেট করুন ।

3) সিএসএস সহ চিত্রগুলি লোড করুন :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) এই জাভাস্ক্রিপ্ট ব্যবহার করুন

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

— জন কনডে
সূত্র

পৃষ্ঠাটি লোড হওয়ার পরে সেগুলি লোড করার কোনও উপায় আছে? সুতরাং ব্যবহারকারী কার্সারে একটি লোডিং বৃত্ত দেখতে পাবে না? ওয়ান ওয়ে একটি লুকানো ফ্রেম যে ব্যবহারসমূহ গোপন ফ্রেম বিলম্ব জাভাস্ক্রিপ্ট থাকার করা হবে আমার প্রশ্ন এ, প্রদর্শন করা হবে এমন stackoverflow.com/questions/13437091/... কিন্তু দেরি এবং যে কার্সার উপর বৃত্ত লোড প্রদর্শিত জন্য আপনার কোনো পছন্দের পদ্ধতি ?

— রিসিগেইনস্ট

কিছু নয়, আমি এই পচনশীল press.com/3-ways-preload-images-css-javascript-ajax খুঁজে পেয়েছি এবং এটি সময় বিলম্বের সাথে নির্লজ্জভাবে কাজ করে।

— রিসেইগেইনস্ট

10

আমি জাভাস্ক্রিপ্ট সমাধানটি সত্যিই পছন্দ করি না - এটি অগোছালো, বজায় রাখা কঠিন এবং জেএস অক্ষম থাকলে অবশ্যই অবশ্যই ব্যর্থ হয়।

আধুনিক সমাধানটি হ'ল সিএসএস স্প্রেটিস ব্যবহার করা - এটি চেষ্টা করুন, বিশ্বাস করুন, আপনি কেন আগে কখনও করেননি তা ভাববেন wonder)

— ডিএমপি
সূত্র

0

খাঁটি সিএসএস ব্যবহার করে কীভাবে চিত্রগুলি পূর্ব-লোড করা যায় সে সম্পর্কে আমি এই লিঙ্কটি পেয়েছি:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

যখন আমাকে হোভারের বিভিন্ন পটভূমি চিত্রগুলি পরিবর্তন করা দরকার তখন এটি আমার পক্ষে কাজ করে।

— শিনা ক্যাটরিনা
সূত্র

0

আপনার সিএসএসের উপরে এটি যুক্ত করুন:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

আপনি যদি স্প্রাইট রুটটিতে যান যেমন ড্যানপ পরামর্শ দেয় আপনি স্প্রাইটের প্রয়োজন হওয়ার আগে এটি লোড করার সাথে এখনও একটি সমস্যা রয়েছে। বলেছিল আমি স্প্রিটকে ভালবাসি; এগুলি সহজেই তৈরি করতে আমি স্টিভ সাউডার্স থেকে স্প্রাইটেম সরঞ্জামটি ব্যবহার করি :

— নিস এনজিস্ট্রম
সূত্র