در این مقاله درباره نحوه استفاده از تصویر Sprite در MVC با استفاده از CSS صحبت خواهیم کرد. این روش برای بهینه سازی عملکرد نرم افزار یا وب سایت است که در آن همه تصاویر در یک تصویر یکتا ترکیب میشوند. این تصویر واحد لود شده و با استفاده از یک بخش از تصویر مورد نیاز برای کنترل با استفاده از CSS نمایش داده می شود.

در این مقاله درباره تصویر  Sprite در  MVC با استفاده از  CSS صحبت خواهیم کرد.  این روش برای بهینه سازی عملکرد نرم افزار یا وب سایت است که در آن همه تصاویر در یک تصویر یکتا ترکیب میشوند. این تصویر واحد لود شده و با استفاده از یک بخش از تصویر مورد نیاز برای کنترل با استفاده از  CSS نمایش داده می شود.

 تصویر  Sprite  مجموعه ای از تصاویر است که در یک تصویر قرار میگیرند. یک صفحه وب که تعداد زیادی تصویر در آن قرار داد زمان طولانی ای برای بارگذاری احتیاج دارد و تعداد زیادی درخواست ها را باید پاسخگو باشد. برای کاهش این درخواست ها و زمان بارگذاری صفحات از تصویر  Sprite  استفاده می شود.

فواید استفاده از تصویر  sprite  به شرح زیر می باشد :

     . به طور قابل ملاحظه ای برنامه یا وب سایت شما را بهینه میکند.

     . تعداد درخواست های  HTTP را کاهش می دهد.

     .   کمک به بهینه سازی اثرات شناور

نحوه پیاده سازی آن را در  MVC در زیر شرح داده ایم:

برنامه ساده ای که دارای تصویر یا آیکون باشد را ایجاد کنید.

وب سایت های رایگانی موجود هستند که برای ایجاد این تصاویر به شما  کمک میکنند . بعضی از آنها عبارتند از:

csssprites.com

css.spritegen.com

spritecow.com

همچنین برنامه هایی برای ایجاد این تصاویر موجود است. آیکون های خود را در یکی از این سایت ها آپلود کرده و تصویر  Sprite  خود را به صورت زیر دریافت کردیم.

 همه تصاویر را در برنامه خود قرار دهید.

فایل  CSS را که آیکون ها را جداگانه تعریف میکند به صورت زیر مینویسیم.

    .sprite  
    {  
        background: url('Images/sprite.png') no - repeat top left;width: 204 px;height: 204 px;  
    }  
    .sprite.im1   
    {  
            background - position: 0 0;  
            width: 256 px;  
            height: 256 px;  
            background - size: 20 % ;  
        }  
        .sprite.im2   
        {  
            background - position: 0 - 266 px;  
            width: 256 px;  
            height: 256 px;  
            background - size: 20 % ;  
        }  
        .sprite.im3  
        {  
            background - position: 0 - 532 px;  
            width: 204 px;  
            height: 204 px;  
            background - size: 20 % ;  
        }  
        .sprite.im4   
        {  
            background - position: 0 - 746 px;  
            width: 204 px;  
            height: 204 px;  
            background - size: 20 % ;  
        }  

یک صفحه  index  ایجاد کرده و کد زیر را در آن قرار دهید. توجه داشته باشید که از دو بخش تصویر استفاده کردیم. یکی تصویر معمولی که تمام تصاویر در آن جداگانه دانلود می شوند و یکی تصویر  Sprite   که از فایل  CSS بالا استفاده میکند.

    @ {  
        ViewBag.Title = "Index";  
    }  
      
      
    < link href = "~/Content/Icon.css"  
    rel = "stylesheet" / >  
      
        < h2 > Index < /h2>  
      
    < fieldset >  
        < div id = "dvCategoryResults" >  
        < b > Normal Images < /b> < table >  
        < tr >  
        < td >  
        < img src = "~/Content/Images/next.jpg"  
    alt = "Image"  
    height = "50"  
    width = "50" / >  
        < br >  
        < img src = "~/Content/Images/Pause.jpg"  
    alt = "Image"  
    height = "50"  
    width = "50" / >  
        < br >  
        < img src = "~/Content/Images/prev.jpg"  
    alt = "Image"  
    height = "50"  
    width = "50" / >  
        < br >  
        < img src = "~/Content/Images/stop.jpg"  
    alt = "Image"  
    height = "50"  
    width = "50" / >  
        < br >  
      
        < /td> < /tr> < /table> < br >  
        < br >  
        < b > Sprite Images < /b> < table >  
        < tr >  
        < td class = 'sprite im1' > < /td> < td class = 'sprite im2' > < /td> < td class = 'sprite im3' > < /td> < td class = 'sprite im4' > < /td> < /tr> < /table>  
      
    < /div>  
      
      
      
    < /fieldset>  

برنامه را اجرا کنید. نتیجه زیر را مشاهده میکنید.

عملکرد آن را با استفاده از  Firebug تست میکنیم.

همانطور که مشاهده میکنید  5  تصویر دانلود شده است که چهار تای آنها متعلق به تصاویر معمولی که در مجموع زمان بیشتری طول میکشد و یکی برای تصویر   Sprite  است که فقط 2 میلی ثانیه طول میکشد تا دریافت شود.

همچنین 4 پاسخ برای راه معمولی دریافت شده است و برای تصویر  Sprite  فقط یک درخواست برای بخش تصویر وجود دارد.