responsive-images - 源码 - 源码 - 免费下载

responsive-images
文件大小： unknow
源码售价： 5 个金币积分规则积分充值
资源说明：Simple code to make all images responsive
responsiveImage.js
==================

This is a standalone js file that given a simple config, will handle responsive images and lazy-loading. Gzipped it's only 1.8KB!

Why is this useful?
-------------------

Responsive (or adaptive) design is very useful for catering to varying browser sizes, but quite often images are forgotten. This can lead to trying to load images design for a desktop on to a 320px-wide screen which is a large amount of extra data required for a picture that will appear so small.

This file, given the images are setup correctly in the first place, will only load the required size of the image for the screen size, saving bandwidth and time. It calculates this by taking a list of image sizes and looks for the largest possible size that's not too large.

The lazy-loading aspect of this js is a toggle in the options that will cause the images to only start to be loaded when then user has scrolled down to them, which is useful on image-heavy sites or a slow internet connection.

How do I use this?
------------------

Include the JS file just before the end of the body tag. This needs to be called after the page has loaded:

    


Now wrap your images in `` tags with the class `responsive`. The responsive-image tag is one that isn't used by any browser, so allows us to create a custom tag for our needs - in this case storing hidden information about your images. It is recommended that you use css to make sure the tag is never show to the user. For further explanation of the responsive-image attributes, look below at the ` options` section.:

    

    ...

    


You will need to set up a config for your site and then call `responsiveImage.Init(config)`. This should be called in the foot of the page. If you don't want to alter the config, then just call the code using `responsiveImage.Init({});` A config looks like:

    var config = {
        default: {
            sizes: [960, 720, 480, 320],
            lazy: false
        }
    };
    responsiveImages.Init(config);


Finally, you need to make sure your images exist. This method uses images of different sizes and these will need to be either pre-generated, or be automatically generated. Note that these sizes are the page width, not the image width.

Additional features
===================

Use noscript tags
-------------------

If you need to have your images available to users who don't use javascript, for instance if your analytics tell you that users are using your site but not using javascript, then you can do the following below. This is not enabled by default as the major browsers now auto-load images they find in noscript tags.

Set the `useNoScript` flag in the config:

    var config = {
        useNoScript: true,
        ...
    };

Next, wrap all of your images in the following manner. It is recommended that you specify your smallest-size of image in the noscript tag, so that the least amount of bandwidth is wasted, and that for mobile users with the smallest screens, no bandwidth is wasted.

    


Have multiple configs (namespacing)
-----------------------------------

You may have noticed that config options are namespaced above into `default`. This is because you can have other namespaces, allowing you to have some images that have different sizes, or don't lazy-load. You can do this by:

    var config = {
        default: {
            sizes: [960, 720, 480, 320]
        },
        always: {
            sizes: [320, 160]
            lazy: false
        }
    };

You can then set a class on your noscript that matches the namespace in the config:

    

    ...

    

Configuration
=============

The default config
------------------

The default config looks like:

    config: {
        className: "responsive",
        lazyDelay: 200,
        useNoScript: false,
        default: {
            sizes: [320, 480, 720, 100000],
            fileNames: {320: 320, 480: 480, 720: 720, 100000: 100000},
            imagePath: "^(.+\\-)(\\d+)(\\.[a-z]+)$",
            imagePathSizeField: 2,
            lazy: true,
            lazyPrePx: 200
        }
    }

The first 3 items listed are general configuration options. These apply to every image loaded using this method. The object inside the default config is the default namespace, this is so you can specify how different images should behave.

The general options are:

 - className - The name of the class used to detect a valid `