Home/ Questions/Q 8534853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:17:35+00:00

I am using the text box in my page, I used the images for

  • 0

I am using the text box in my page, I used the images for the text box to make the UI to look better(superimpose the images on the text box).I used the left side part of the text box image(my custom image for the text box) and right side part image and applied those two images using background property of the two <span> tags surrounded the <input> tag as below

<span class="right-side-BG-image-for-test-box>
    <span class="left-side-BG-image-for-test-box>
       <input/>
    </span>
</span>

While i focus or click the text box, using jQuery i added the class focus to the two spans surrounding the <input> tag and which give different background images(left and right) to highlight that the text box is focused.

My Question is whether, by using the four img tags(before the text box with the source attribute referring to the image paths of those four images(two normal and two focus images) with display:none css property, will improve the load time of image?, since i don’t want user to experience some time lag in loading the focus images when user clicks the text box?. Thanks in advance for the answer.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try to preload the focus images as soon as possible but don’t display it yet

    <img src='home-focus.jpg' style='display:none;'>
<img src='about-focus.jpg' style='display:none;'>

    this will ensure that the images are loaded already in the page even the page doesn’t really need to show it once the page is completely loaded.

    once the jquery/javascript needs the image, the browser will not request for the image resource again

    • 0