Javascript preload images for css background-image change

萝らか妹 提交于 2019-12-01 11:23:45

Stack your images as one image, and then add a class that shifts the image's background property to the appropriate offset.

Not only does this turn multiple images into one HTTP request, it also means you don't have to bother writing code to preload the hover state of the images.

This is called a sprite sheet.

You can make a sprite image, i.e. put the two images together into one. Then you just change the background position to show the other part of the image. If the element is for example 20 pixels high, you move the background position by 20 pixels:

function hoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

function hover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

As it's only a single image, the alternate look is loaded from the start. This will also reduce the number of requests to the server.

You can ever put more images together like this. You can see an example at the top right corner of my website, where a single image is used for two different flags each in two different states.

pretty simple to preload images, something like:

var img = new Image();
img.src = "/path/to/image.jpg";

This could be in a window.load or dom:ready event somewhere

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!