vin-ai / jquery.smartify.js Goto Github PK

In some conditions we will required to just call callback function (appear), when element is became visible.

For e.g, to load Twitter or Facebook widget. Just need to execute script!

This will be beneficial for single page website and nested page scrolling articles/blog page.

Change URL as next section,article/blog is/or becoming visible

Read different URL from different attribute if window.devicePixelRatio is greater than 1.

e.g:

For Image Tag:

<img class="smartify"
    ng-src="http://lorempixel.com/420/236/nature/1"
    ng-src-dpr-1_5x="http://lorempixel.com/480/270/nature/1"
    ng-src-dpr-2x="http://lorempixel.com/560/315/nature/1"
    ng-src-dpr-3x="http://lorempixel.com/640/360/nature/1"
/>

For Anchor Tag:

<a class="smartify hidden_if_noscript"
    href="http://www.example.com/awesome-page"
    ng-src-dpr-1_5x="http://www.example.com/awesome-page?dpr=1.5"
    ng-src-dpr-2x="http://www.example.com/awesome-page?dpr=2"
    ng-src-dpr-3x="http://www.example.com/awesome-page?dpr=3"
>Load Awesome Page</a>
<noscript>
<iframe src="http://www.example.com/awesome-page"
    width="100%" frameborder="0" allowtransparency="true" height="500">
</iframe>
</noscript>

Replace placeholder with some image having text "AdBlocker is blocking this image. Please allow to see.". And disable smartify for those images to load when visible in viewport.

Plugin has flexibility to define custom original source attribute. So, if user has defined defined attribute which begins with data-. Then it will be good to read using jQuery method .data() instead .attr().

Not all browsers/devices fires window.resize() event on orientation change. So on orientation change some new elements could be visible in view-port. But Smartify won't work for that!

Will $(window).resize() fire on orientation change?

The WebKitCSSMatrix interface / window.orientation API