imgin › Public Methods

The example below uses the public methods force() and refresh().

The Add images button will dynamically add new lazy-loadable images to the DOM
The refresh() button will update the internal array of lazy-loadable images and trigger a load cycle
The force() button will automatically load any unloaded images. This only works for images that are in imgin's interal array. If you've just added new images via the Add images button, you'll need to refresh() before you can force().

Example

Code for this example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    // Initialize imgin and store the return object
    // Adding a negative offset so you can see part of the unloaded image before it loads
    var I = imgin({ offset: -100 });
    // Just a little counter for adding images
    imgnum = 7;

    // Wire up the buttons
    $('#force').on('click', function(e) {
        I.force();
    });
    $('#refresh').on('click', function(e) {
        I.refresh();
    });
    $('#add').on('click', function(e) {
        for(i=0; i<3; i++) {
            var paddedImgNum = imgnum.toString();
            if(paddedImgNum.length == 1) paddedImgNum = '0' + paddedImgNum;
            $('#imgs').prepend("\n" + '<div class="img"><img data-imginsrc="/images/examples/image-' + paddedImgNum + '.jpg" /></div>');
            imgnum++
        }
        if(imgnum > 18) imgnum = 1;
    });