ADF12cR2: Boost Page Image Rendering with Lazy Loading

In Oracle WebCenter Portal or Oracle ADF Applications is very common the usage of some Image Galleries or other kind of web content pages with Images or Videos in high resolution.

In Oracle ADF can be applied the same techniques used in the common Web Sites developed by using JavaScript technologies.

This example shows how to use one of the many Image Lazy Load implementation you can find in Internet nowadays. In this case I will make use of https://github.com/verlok/lazyload

https://github.com/DanielMerchan/adf

How to use the basics of this library?.

It is required to import the lazyload.js javascript library, populate the data-src HTML attribute in the img tag  as explained in the LazyLoad GitHub.

But, how can I add the data-src attribute in an ADF Image tag?.
The ADF Operator Tag <af:passThroughAttribute> can be used with any ADF tag for rendering custom HTML attributes which are not in the out-of-the-box Catalog.

<af:document title="untitled1.jsf" id="d1">
        <af:form id="f1">
            <af:image id="i1" styleClass="lazyload"
                      source="/images/giphy.gif">
                <af:passThroughAttribute name="data-src"
                                         value="https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260"/>
            </af:image>
            <af:image id="i2"  styleClass="lazyload"
                      source="/images/giphy.gif">
                <af:passThroughAttribute name="data-src"
                                         value="https://images.pexels.com/photos/378570/pexels-photo-378570.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260"/>
            </af:image>
            <af:image source="/images/giphy.gif" styleClass="lazyload"
                      id="i3">
                <af:passThroughAttribute name="data-src"
                                         value="https://images.pexels.com/photos/672532/pexels-photo-672532.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260"/>
            </af:image>
            <af:image source="/images/giphy.gif"  styleClass="lazyload"
                      id="i4">
                <af:passThroughAttribute value="https://images.pexels.com/photos/38278/tiger-head-wildlife-animal-38278.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260"
                                         name="data-src"/>
            </af:image>
        </af:form>
        <af:resource source="/js/lazysizes.min.js" type="javascript"/>
    </af:document>
In this example, a loading gif is shown while the page renders and the images are loaded after the page has been rendered.



Then, the images are loaded after the Page has been loaded.


You can use a low-res version of the image in the first rendering and the replace it by a hi-res image.

More information and the project in my ADF Samples in GitHub

Comments

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more