JQuery image pre-loading

JQuery image pre-loading

JQuery image pre-loading is no longer a new technology. For example, in order to increase the image loading speed during image carousel (in some hover events), image pre-loading technology is required, in this way, the image switching is smooth, which improves the user experience. Let's take a look at the implementation method and simple description: The latest masterpiece of the UI front-end framework! Prize trial

. Code

1. Var img = $ (''). attr ('src', 'imageurl.jpg '); jQuery creates an image element and sets its address. If it is processed in document ready, when a page is loaded, the browser is told to load the specified image. Of course, we will not do this in most cases, otherwise the page will remain waiting for image loading. When a user just opens an image album, we can process the pre-loaded image, because we can foresee the possibility that the user will continue to browse the next image. We can also pre-load a specific number of images at a time based on the naming rules of the images, instead of loading all the images at once. We can see such a small code on the Internet :.
   1. $. PreloadImages = function (){
   2. For (var I = 0; I <arguments. length; I ++ ){
   3. $ (""). Attr ("src", arguments [I]);
   4. }
   5. }
   6. $. PreloadImages ("image1.jpg", "image2.jpg ");

      Open the chrome browser to monitor the loading of images in the Network on the console. Now you will find that the images are pre-loaded. If you are interested, you can check chrome debugging js and familiarize yourself with the monitoring method of the current request in chrome, similarly, disabling the chrome browser cache can also significantly improve the speed of image pre-loading (by F12 in the lower-right corner of the console, there are settings in it ). The latest UI front-end framework! Prize trial

      Finally, we can place the image in the specified element using the append or appendTo method:

      . Code
      1. $ ('# Iner'). append (img );

         At this time, the processing basically does not take time, because we already know that the image has been downloaded.