JQuery image pre-loading

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.