5 Replies - 221 Views - Last Post: 13 November 2017 - 09:40 AM

#1 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

how to apply lazy-loading on text?

Posted 09 November 2017 - 06:18 AM

Hi, I am building a small user interface. In that, I want to apply the lazi-loading concept to text in 'vanilla' Javascript. First I make a slice of ten on the home page now I want to access next data. I was thinking to use AJAX in it. but don't have any clue...Can you please help me out? here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="two.css" />
<script src="jquery.jscroll.js"></script>
<script src="two.js"></script>

<body onload="myFunction1()">
  <br>
  <br>
  <div class="row">
    <div class="column left" style="background-color:White;"></div>

    <div class="column right" style="background-color:#bbb;">
      <form id="myForm" onsubmit='return onsubmit(this)'>
        Find:
        <input type="text" class="demo1" id="myInput" align="center" onkeyup="myFunction()" placeholder="Search here...">
        <button id="clear" onclick="document.getElementById('myInput').value = ''"> Clear </button>
      </form>
      <br>
      <ul id="demo">
        15 words total
      </ul>
      <br>
      <div onscroll="myFunction3(this)" style="width:100%;height:250px;overflow:scroll;padding:5px;color:#714D03;scrollbar-base-color:#DEBB07;">
        <ul id="myUL" class="demo">

        </ul>
      </div>
       <p><span id="demo"></span></p> 
    </div>
  </div>



js file
var persons = [
    {firstname : "Malcom", lastname: "Reynolds", id:1},
    {firstname : "Kaylee", lastname: "Frye", id:2},
    {firstname : "Jayne", lastname: "Cobb", id:3},
    {firstname : "Mal", lastname: "Rlds", id:4},
    {firstname : "ylee", lastname: "ye", id:5},
    {firstname : "yne", lastname: "Cb", id:6},
    {firstname : "Mal", lastname: "Rolds", id:7},
    {firstname : "lee", lastname: "Fryedwwwwd", id:8},
    {firstname : "Jay", lastname: "bdwe", id:9},
    {firstname : "Maljh", lastname: "Rolds", id:10},
    {firstname : "ljyyu", lastname: "jhjFryed", id:11},
    {firstname : "ryJay", lastname: "jkmCdwe", id:12},
    {firstname : "yuryMal", lastname: "jhkhRolds", id:13},
    {firstname : "rtulee", lastname: "Frwwd", id:14},
    {firstname : "ryuyJay", lastname: "Cryyobbdwe", id:15}
];
var start = 0;
var size = 10;
var current = 0;

function getFullName(item, index) {
  return "<li>" + item.firstname + "<span>" + item.lastname + "</span> " + item.id + "</li>";
}
var getFullNameForHighlighting = function(searchText) {
    return function(item, index) {
       var index = item.firstname.toUpperCase().indexOf(searchText.toUpperCase())+searchText.length;
       console.log(index)
           return "<li>" + "<span class='highlight'>"+searchText + "</span>" +item.firstname.substring(index) + "<span>" + item.lastname + "</span> " + item.id + "</li>";
    }
};

function myFunction1(){
  current = size;
  document.getElementById("myUL").innerHTML = persons.map(getFullName).slice(start, current).join('');
}

function myFunction() {
  current = size;
  var input, filter, ul, li, a, i, count = 0;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();

  var longWords = persons.filter(function(person) {

    return person.firstname.toUpperCase().indexOf(filter) > -1
  });
  var message = "Result:" + longWords.length + " words containing '" + input.value;
  document.getElementById("demo").innerHTML = message;

  ul = document.getElementById("myUL");
  varInnerHtmlText = longWords.map(getFullNameForHighlighting(filter));
  ul.innerHTML = varInnerHtmlText;

}
var x = 0;
function myFunction3(e) {
  console.log(e);
  document.getElementById("demo").innerHTML = ++x; 
}


CSS
* {
  box-sizing: border-box;
}
#myInput {
  width: 50%;
  font-size: 14px;
  padding: 8px 10px 8px 5px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  margin-top: 20px;
}
#clear {
  margin-left: 20px;
  margin-top: 40px;
  font-size: 14px;
  margin-right: 50px;
  padding: 4px 4px 4px 4px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 8px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: block;
  width: 100%;
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
}
body {
  margin: 0;
}
.column {
  float: left;
  margin-top: 50px;
  padding: 10px;
  height: 550px;
}
.left {
  width: 20%;
}
.right {
  width: 60%;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
ul.demo {
  display: inline-block;
  border-bottom: 1px dotted black;
}
ul.demo li {
  position: right;
}
li:hover span {
  width: 100px;
  background-color: white;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: absolute;
  z-index: 1;
  color: black;
}
.highlight {
  font-weight: bold;
  color: black;
}
li em {
  background: #ff6;
  font-weight: bold;
  font-style: normal;
}


Thanks...!!!

Is This A Good Question/Topic? 0
  • +

Replies To: how to apply lazy-loading on text?

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: how to apply lazy-loading on text?

Posted 09 November 2017 - 10:20 AM

The first thing I would suggest is to give your functions and variables meaningful names.

If you want to define all of your data in Javascript that's fine, or if you want to load each chunk from the server then that's what you would use ajax for. Either way, the general idea is to have an event listener for the scroll event (and maybe mousewheel, I'm not sure if using the mouse wheel triggers the scroll event also). The listener would get the total height of the page and the current scroll position, and if those are within a certain range that you specify then it would load the next set of records.
Was This Post Helpful? 0
  • +
  • -

#3 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to apply lazy-loading on text?

Posted 10 November 2017 - 07:11 AM

Don't know why, but if I replace function name with other proper names they are not working. According to your suggestions I write
<script>
document.getElementById("myDIV").onwheel = function() {lazyLoad1()};

function lazyLoad1() {
   // document.getElementById("myDIV").style.fontSize = "35px";// what should I write here to fetch next data
}
</script>



This is working with font size. But I don't know what should I write instead of that. which will call rest of the data after scrolling.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: how to apply lazy-loading on text?

Posted 10 November 2017 - 11:00 AM

Make sure you check your developer console for error messages, maybe you're not changing the names everywhere.

You need to get the total height of the page, the current scroll position, and compare them to decide if they are close enough that you want to load the additional content. Maybe you want to load it when the user is 100px from the bottom, or 250, or 500, play around and decide what works for you.
Was This Post Helpful? 0
  • +
  • -

#5 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to apply lazy-loading on text?

Posted 13 November 2017 - 07:36 AM

I add this code in js file:
document.getElementById("myDIV").onwheel = function() {lazyLoad1()};

function lazyLoad1() {
    document.getElementById("myDIV").style.fontSize = "25px";
    var element = document.getElementById("myDIV");
    var a = element.scrollTop;
    var b = element.scrollHeight - element.clientHeight;
    var c = a / b;
    console.log(c);
    if(c===1)
    {
       current = 5;
       //document.getElementById("myUL").innerHTML = persons.map(getFullName).slice(start, current).join('');
    }
}



But unable to append next data. How should I do that?
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: how to apply lazy-loading on text?

Posted 13 November 2017 - 09:40 AM

You can use the DOM methods like document.createElement to create the new elements and append them to existing elements, or you can build a string of HTML and add it to innerHTML.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1