I'm trying to lazy-load an image & video file with jQuery, following the example from the URL below:
https://varvy.com/pagespeed/defer-videos.html
https://varvy.com/pagespeed/defer-images.html
The problem is that my paginated data loaded onScroll by jQuery, but all of my image and video wasn't loaded. How can I solve this?
[ Pagination ]
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
page += 1;
if (page <= maxPages) {
$.ajax({
beforeSend: function () {
$('.loader').html('Loading....');
},
type: 'GET',
url: 'blog/postloader?page=' + page,
data: { 'page': page },
cache: false,
success: function (data) {
$('.loader').html('Load More...');
$('.blogItems').append(data);
}
});
}
else { $('.loader').html('No More Post Available'); }
}
[ Lazy Loader function ]
function delayImg() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
//window.onload = delayImg;
// Lazy Load Video
function delayVid() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
//window.onload = delayVid;
function start() {
delayImg();
delayVid();
}
window.onload = start;
you can combine the function with jQuery
function delayMedia() {
$('img, iframe').each(function() {
if (!$(this).attr('src')) { // set only if src is empty
var dataSrc = $(this).data('src');
if (dataSrc)
this.src = dataSrc;
}
});
}
call it on page load and after Ajax
$('.blogItems').append(data);
delayMedia();
And your function are not "really" lazy load, usually it appear after element position reached not on page load
function isVisible(el) {
var rect = el.getBoundingClientRect(),
elemTop = rect.top,
elemBottom = rect.bottom;
return (elemTop >= 0) && (elemBottom <= window.innerHeight);
}
function delayMedia() {
$('img, iframe').each(function() {
if (!$(this).attr('src')) { // set only if src is empty
var dataSrc = $(this).data('src');
if (dataSrc && isVisible(this)){
console.log(dataSrc)
this.src = dataSrc;
}
}
});
}
$(window).on('scroll', function() {
delayMedia();
});
.dh {
height: 300px;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/1712173free-wallpaper.jpg" />
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/3d_falling_leaves.jpg" />
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/free-wallpapers-640x400.jpg" />
Related
I'm trying to learn javascript and jquery lately so I'm not so good yet.
The page I'm currently struggling with is a news page. Basically news are article tags and are contained in two different main category divs.
<body>
<div class="a">
<article> ... </article>
<article> ... </article>
<article> ... </article>
...
</div>
<div class="b">
<article> ... </article>
<article> ... </article>
<article> ... </article>
...
</div>
</body>
In each article there's a slideshow with pictures and this is the code in JS:
//dots functionality
dots = document.getElementsByClassName('dot');
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
It worked fine until I made the news data load on scroll with ajax. The JS code doesn't work anymore and I don't know how to fix it.
Here is the ajax code:
$(document).ready(function() {
function getDataFor(category) {
var flag = 0;
function getData() {
$.ajax({
type: 'GET',
url: 'get_data.php',
data: {
'offset': flag,
'limit': 3,
'cat': category
},
success: function(data) {
$('.' + category).append(data);
flag += 3;
}
});
}
getData();
var $window = $(window);
var $document = $(document);
$window.on('scroll', function() {
if ($window.scrollTop() >= $document.height() - $window.height()) {
getData();
}
});
}
getDataFor('a');
getDataFor('b');
});
So I have a MVC code that generates something like this
<div class="photoset">
<img />
<img />
</div>
<div class="photoset">
<img />
<img />
<img />
</div>
And I'm trying to make a jQuery to infinite scroll and as the user is scrolling, it generates more photosets.
I was somewhat successful in doing that but, after I generate more photosets with my infinite scroll, the newly added code won't work with my previous jQuery plugin to navigate between images.
Here is the jQuery code to navigate:
jQuery
$(document).ready(function () {
$('.photoset').each(function () {
$(this).data('counter', 0);
$items = $(this).find('img')
$(this).data('numItems', $items.length);
$(this).closest('.row').prev('.row').find('.nav-informer').text($(this).data('counter') + 1 + " de " + $(this).data('numItems'));
if (($items.eq(0).width() / $items.eq(0).height()) < 1) {
$(this).css({
width: "445",
height: "667",
margin: "auto"
});
}
});
var showCurrent = function (photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut(1000);
$items.eq(itemToShow).fadeIn(1000);
};
/* ---------------------------------------------- /*
* Prev
/* ---------------------------------------------- */
$('.prev').on('click', function () {
var photoset = $(this).closest('.row').prev('.row').find('.photoset');
photoset.data('counter', photoset.data('counter') - 1);
if (photoset.data('counter') < 0)
photoset.data('counter', photoset.data('numItems') - 1);
photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
showCurrent(photoset);
});
/* ---------------------------------------------- /*
* Next
/* ---------------------------------------------- */
$('.next').on('click', function () {
var photoset = $(this).closest('.row').prev('.row').find('.photoset');
photoset.data('counter', photoset.data('counter') + 1);
if (photoset.data('counter') > photoset.data('numItems') - 1)
photoset.data('counter', 0);
photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
showCurrent(photoset);
});
});
And the Ajax function to call for more photosets, passing the page number:
Ajax
var page = 0,
inCallback = false,
hasReachedEndOfInfiniteScroll = false;
var ulScrollHandler = function () {
if (hasReachedEndOfInfiniteScroll == false &&
($(window).scrollTop() == $(document).height() - $(window).height())) {
loadMoreToInfiniteScrollUl(moreRowsUrl);
resizeNewElements();
}
}
function loadMoreToInfiniteScrollUl(loadMoreRowsUrl) {
if (page > -1 && !inCallback) {
inCallback = true;
page++;
$(".loading").show();
$.ajax({
type: 'GET',
url: loadMoreRowsUrl,
data: "pageNum=" + page,
success: function (data, textstatus) {
if (data != '') {
$(".infinite-scroll").append(data);
}
else {
page = -1;
}
inCallback = false;
$(".loading").hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
}
function showNoMoreRecords() {
hasReachedEndOfInfiniteScroll = true;
}
And this is the function that calls the infinite scroll:
$(function () {
$(".loading").hide();
});
var moreRowsUrl = '#Url.Action("index", "home")';
$(window).scroll(ulScrollHandler);
I did some research but couldn't stabilish a reason why my code doesn't work, tried some things but did not have success. If anyone could help me, would be great! Thanks in advance, and sorry for any mistake, I'm extremely new with jQuery and Ajax.
You can try with the event delegation for the click event on .prev and .next elements:
$(document).ready(function(){
$(document).on('click', '.prev', function(){.....});
$(document).on('click', '.next', function(){.....});
});
I create a pop-up dialog box which lift up on left bottom while user scroll page.
You can see it live here- http://uposonghar.com/jobs/odesk/daniel/new/
My problem is it does not smoothly lift up first time, then it is ok. Anyone please suggest any idea to fix it. Need to make smoothly lift up.
My code
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
x<a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript Code-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);
i think you need css changes, copy paste the following in your aspx
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
Hope it Helps
All you need to do is add the following line to your document ready as the First line
$("#scrolltriggered").css({bottom: -235});
This will make sure that the popup is scrolled to the bottom by 235px. If you need it to scroll variably add the Elements height by using jquery selector.
See the Fiddle Here
i am working on an image slider here. I am trying to display the current number of image being displayed which has the opacity of 1 which is shown in front.
how can I check for opacity of an image and how an i check it again and again so that when the next image opacity is 1 the image number in Dom is displayed.
here is my code
html
<div id="Fader" class="fader">
<img class="slide" src="images/lounge/full/1.jpg" alt="bgImg" />
<img class="slide" src="images/lounge/full/2.jpg" alt="bgImg" />
<img class="slide" src="images/lounge/full/3.jpg" alt="bgImg" />
</div>
Now suppose I have 2.jpg with opacity 1 after some time how can i check which one has opacity of 1 that's being displayed on top?Thanks.
And here is the js Code
(function ($) {
function prefix(el) {
var prefixes = ["Webkit", "Moz", "O", "ms"];
for (var i = 0; i < prefixes.length; i++) {
if (prefixes[i] + "Transition" in el.style) {
return '-' + prefixes[i].toLowerCase() + '-';
};
};
return "transition" in el.style ? "" : false;
};
var methods = {
init: function (settings) {
return this.each(function () {
var config = {
slideDur: 3000,
fadeDur: 900
};
if (settings) {
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = '.slide',
fading = false,
slideTimer,
activeSlide,
newSlide,
$slides = $container.find(slideSelector),
totalSlides = $slides.length,
$pagerList = $container.find('.pager_list');
prefix = prefix($container[0]);
function animateSlides(activeNdx, newNdx) {
function cleanUp() {
$slides.eq(activeNdx).removeAttr('style');
activeSlide = newNdx;
fading = false;
waitForNext();
};
if (fading || activeNdx == newNdx) {
return false;
};
fading = true;
$pagers.removeClass('active').eq(newSlide).addClass('active');
$slides.eq(activeNdx).css('z-index', 3);
$slides.eq(newNdx).css({
'z-index': 2,
'opacity': 1
});
if (!prefix) {
$slides.eq(activeNdx).animate({ 'opacity': 0 }, config.fadeDur,
function () {
cleanUp();
});
} else {
var styles = {};
styles[prefix + 'transition'] = 'opacity ' + config.fadeDur + 'ms';
styles['opacity'] = 0;
$slides.eq(activeNdx).css(styles);
var fadeTimer = setTimeout(function () {
cleanUp();
}, config.fadeDur);
};
};
function changeSlides(target) {
if (target == 'next') {
newSlide = activeSlide + 1;
if (newSlide > totalSlides - 1) {
newSlide = 0;
}
} else if (target == 'prev') {
newSlide = activeSlide - 1;
if (newSlide < 0) {
newSlide = totalSlides - 1;
};
} else {
newSlide = target;
};
animateSlides(activeSlide, newSlide);
};
function waitForNext() {
slideTimer = setTimeout(function () {
changeSlides('next');
}, config.slideDur);
};
for (var i = 0; i < totalSlides; i++) {
$pagerList
.append('<li class="page" data-target="' + i + '">' + i + '</li>');
};
$container.find('.page').bind('click', function () {
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('.page');
$slides.eq(0).css('opacity', 1);
$pagers.eq(0).addClass('active');
activeSlide = 0;
waitForNext();
});
}
};
$.fn.easyFader = function (settings) {
return methods.init.apply(this, arguments);
};
})(jQuery);
$(function () {
$('#Fader').easyFader({
slideDur: 6000,
fadeDur: 1000
});
});
The easiest way would be to have a CSS class that has a opacity: 1.0 property, and then determining which slide currently has this class.
Let's say the class is .displayed, then you can find the active slide using $slides.find('.displayed').
And when moving to a new slide, just remove the class property after doing any necessary animations:
$slides.find('.displayed').animate({opacity: 0}).removeClass('.displayed');
I have a problem that I need to sort out in javascript I believe, but dont know how to begin with it, so hopefully someone from the javascript community may be able to help please.
Basically, the following code allows me to load 10 images into a slideshow carousel.
However, these images are either 600px x 400px Portrait or 400px x 600 Landscape. The problem I have is that the Landscape images
are vertically aligned to the top of the container.
I have managed to get around this by creating two classes in my CSS file image-P & image-L
image-L has a "padding-top:100px " which successfully vertially aligns the landscape images in the centre.
What I'd like to do is for the code to check which images are landscape and then create
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
and anything else use
return '<img src="Images/' + item.url + '" class="image-P" alt="" />';
many thanks in advance.
Cheers Rob.
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Image1.jpg" },
{ url: "Image2.jpg" },
{ url: "Image3.jpg" },
{ url: "Image4.jpg" },
{ url: "Image5.jpg" },
{ url: "Image6.jpg" },
{ url: "Image7.jpg" },
{ url: "Image8.jpg" },
{ url: "Image9.jpg" },
{ url: "Image10.jpg" }
];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
You could try loading the image into JavaScript [1] with the Image class [2] and check the height/width of the image itself to determine which class to apply, but this would slow things down if you did it at load time. (I don't know if the browser would cache the file or not for when you went to display it later).
It seems like it'd be better to wait and apply the style after the image has been added to the document/displayed.
You could probably use jQuery to get the height of the (browser) view and the height of the image then absolutely position the image to be centered. (That'd be more flexible if you wanted to use different image sizes later).
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
http://www.w3schools.com/jsref/dom_obj_image.asp
My solution:
<script type="text/javascript">
function preloader() {
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0] = "Images/image1.jpg"
images[1] = "Images/image2.jpg"
images[2] = "Images/image3.jpg"
images[3] = "Images/image4.jpg"
images[4] = "Images/image5.jpg"
images[5] = "Images/image6.jpg"
images[6] = "Images/image7.jpg"
images[7] = "Images/image8.jpg"
images[8] = "Images/image9.jpg"
images[9] = "Images/image10.jpg"
// start preloading
for (i = 0; i <= 9; i++) {
imageObj.src = images[i];
}
}
</script>
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Images/Image1.jpg" },
{ url: "Images/Image2.jpg" },
{ url: "Images/Image3.jpg" },
{ url: "Images/Image4.jpg" },
{ url: "Images/Image5.jpg" },
{ url: "Images/Image6.jpg" },
{ url: "Images/Image7.jpg" },
{ url: "Images/Image8.jpg" },
{ url: "Images/Image9.jpg" },
{ url: "Images/Image10.jpg" }
];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
return '<img src="' + item.url + '" class="image" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
</script>
<%# Page Title="" Language="C#" MasterPageFile="~/rwmSite.master" AutoEventWireup="true"
CodeFile="Portfolio.aspx.cs" Inherits="Portfolio" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Image1.jpg" },
{ url: "Image2.jpg" },
{ url: "Image3.jpg" },
{ url: "Image4.jpg" },
{ url: "Image5.jpg" },
{ url: "Image6.jpg" },
{ url: "Image7.jpg" },
{ url: "Image8.jpg" },
{ url: "Image9.jpg" },
{ url: "Image10.jpg"}];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
var x = new Image(); x.src = item.url;
while (!x.complete)
if (x.height <= 400)
return '<img src="../Images/' + item.url + '" class="image-L" alt="" />';
else
return '<img src="../Images/' + item.url + '" class="image-P" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<div id="wrap" align="center">
<div class=" jcarousel-skin-tango">
<div class="jcarousel-container jcarousel-container-horizontal">
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
</ul>
</div>
<div class="jcarousel-prev jcarousel-prev-horizontal">
</div>
<div class="jcarousel-next jcarousel-next-horizontal">
</div>
</div>
</div>
</div>
</asp:Content>