Jquery Preload of big image - javascript

How to load the page only when such image is loaded? The base does not work, type:
$('#IDdaImagem').on('load',function(){
})
is a background image, and okay with a jquery plugin to open in other resolutions, the backstretch, it uses a div with class backstretch, as I carry this background image with 2mb before the contents of the site?
i test this and work, but not the item that I give show, appearing at the time, it works only in the alert.
<script>
$('.backstretch img').load(function() {
alert('done loading image');
$("#corpo").show();
});
</script>

Your example makes me think you don't want to "preload" an image necessarily, but want to wait until the image has been loaded before running a script. You can use something like the waitForImages jQuery plug-in for this.
https://github.com/alexanderdickson/waitForImages

Try code given below:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
With Jquery plugin :
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Related

Video.js, tap video on mobile to play/pause

firstly I don't know the logic or syntax of javascript- I just grab code and maybe swap out some values, so as much hand holding as you can provide in your answer is greatly appreciated. I just want my video on mobile devices to pause on tap/resume playing on tap, like with YouTube. I’m currently using CDN for the default css and js files, then I have some skin customization in my css, and my own local js file with the below code. I just need to know what code to add, and where to add it- thanks in advance!
$(function(){
var $refreshButton = $('#refresh');
var $results = $('#css_result');
function refresh(){
var css = $('style.cp-pen-styles').text();
$results.html(css);
}
refresh();
$refreshButton.click(refresh);
// Select all the contents when clicked
$results.click(function(){
$(this).select();
});
});
Bind a "touchstart" event on the container of the Video. For example, if the video is inside then:
jQuery(function(){
var $refreshButton = jQuery('#refresh');
var $results = jQuery('#css_result');
function refresh(){
var css = jQuery('style.cp-pen-styles').text();
$results.html(css);
}
refresh();
$refreshButton.click(refresh);
// Select all the contents when clicked
$results.click(function(){
jQuery(this).select();
});
jQuery( '.video' ).on('touchstart', function(){
if (player.userActive() === true)
{
player.userActive(false);
}
else
{
player.userActive(true);
}
});
});

Hide loading gif after ajax callback

I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:
function loadProducts(url) {
$("#loading").show();
$('#inner').fadeOut(1).load(url + ' .product-list', function() {
$('#inner').fadeIn(1000, function() {
$("#loading").hide();
});
});
}
The #loading is hiding when the HTML is loaded .load(url + ' .product-list'. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?.
Thanks in advance.
You can use promises to check when all the images have loaded, and then remove the loading gif.
This creates a promise that is resolved when the image has loaded, all the promises are kept in an array, and when all promises are resolved, i.e. all images are loaded, the callback fires.
function loadProducts(url) {
$("#loading").show();
$('#inner').fadeOut(1).load(url + ' .product-list', function() {
var promises = [];
$('#inner').find('img').each(function(_, image) {
var img = new Image(),
def = new $.Deferred();
img.onload = function() {
def.resolve();
}
promises.push( def.promise() );
img.src = image.src;
if (img.complete) img.onload();
});
$.when.apply(undefined, promises).done(function() {
$('#inner').fadeIn(1000, function() {
$("#loading").hide();
});
});
});
}
You can use ImagesLoaded
Sample usage
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
Could add/remove the loader as a class? I have base 64encoded the loader, so there is no pre loader required. This also uses a closure to allow the counter to remember its value.
var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = (function () {
"use strict";
var count = 0; // init the count to 0
return function () {
count++; //count
if (count === 1) { // do something on first click
$('.img-loader-content').addClass('loader');
$('.imgDiv').load("images/img.jpg", function () {
$('.img-loader-content').removeClass('loader');
});
}
if (count > 1) {
$('.imgDiv').slideToggle(400);
}
};
})
();
You may try using Image object. E.g:
function loadImage(url) {
$("#loading").show();
var img = new Image();
img.src = url;
img.onload = function(e) {
$("#loading").hide();
//ur code to append/show the image
};
}
the most approach to this is using onLoad , so basically after the success call of ajax , invoke another call into success function :
http://www.w3schools.com/jsref/event_onload.asp
onload is most often used within the element to execute a
script once a web page has completely loaded all content (including
images, script files, CSS files, etc.).
or use native solution like this :
<img src="w3javascript.gif" onload="loadImage()">
http://www.w3schools.com/jsref/event_img_onload.asp
Also last answer of this question is very useful in your case :
Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?
You can do it easily by ajaxComplete callback, here check an example http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

Check onload and onerror using JS/jQuery?

Using HTML I could manually put this into the body
<img style="display:none;"
onload="Success('test')"
onerror="Fail('test')"
src="http://example.com/test.png"
/>
Is there anyway to do this check using jQuery or JavaScript?
Edit: I want to avoid using HTML and inserting image manually. I am trying to accomplish the check using just jQuery/JS.
Yes.. same thing in jQuery would be this
​$('img').load(function(){ // when loaded successfully
console.log('success');
}).error(function(){ // when theres an error
console.log('error');
});​​​​​
FIDDLE
or
$('img').on({
load: function(){
},
error: function(){
}
})
FIDDLE
EDIT:
If you want it in pure javascript you can do something like this
$('<img/>',{ // <-- create the element
src:'http://wichitaatbat.com/wp-content/uploads/Soccer-Ball.png'
}).load(function(){
console.log('success');
}).error(function(){
console.log('error');
});
http://jsfiddle.net/wirey00/LCkkn/
For error, jquery would work in this fashion:
$('img').on('error', function(e) {
});
Same for load:
$('img').on('load', function(e) {
});
You can do this with pure JavaScript like this:
<script language="JavaScript">
var img = new Image(); // Create new image element
img.onload = function(){
// your code
};
img.onerror = function() {
// your code
};
img.src = 'yourImage.png'; // Set source path
</script>
You can try this approach here.

Loading GIF to match with the loading time of a DIV. Jquery

I have a javascript that retrieves the values checked from a set of checkboxes and loads a DIV passing those values.
Currently I show a "loading" .gif before the load of the DIV. However, it has time fixed.
I would like to set the time of this GIF until the DIV has loaded its contents completely, so the user knows that data is loading in case sometimes is slower than others.
Any idea?
Thanks!
$(function() {
$("input[type='checkbox']").on('change', function() {
var colors = [];
$("input[type='checkbox']:checked").each(function() {
colors.push(this.value);
});
if (colors.length) {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
});
$(".loadingItems").fadeOut(300);
} else {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php', function() {
$(".loadingItems").fadeOut(300);
});
}
});
});
As suggested by #Fabricio Matte, the solution was to put the first Fade Out inside the load
inside the function launched with the load:
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
$(".loadingItems").fadeOut(300);
});

Change GallerificPlus effect

I'm searching how to combining galleriffic and lightbox jquery plugin until I found GallerifficPlus (I have downloaded it here).
Is it possible (once deleted the slideshows) to call the lightbox by clicking on the thumbs? I want the lightbox function work after clicking the thumbnail..
Here's the code for the thumbnail part
buildDataFromThumbs: function() {
this.data = [];
var gallery = this;
this.$thumbsContainer.find('li').each(function(i) {
var $a = $(this).find('a');
var $img = $a.find('img:first');
gallery.data.push({slide:$a.attr('href'),thumb:$img.attr('src'),original:$a.attr('original'),title:$a.attr('title'),description:$a.attr('description'),hash:gallery.offset+i});
});
return this;
},
for the original display message
buildImage: function(image) {
if (this.$imageContainer) {
this.$imageContainer.empty();
var gallery = this;
var thisImageIndex = this.currentIndex;
// Setup image
this.$imageContainer
//.append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[this.getNextIndex(this.currentIndex)].hash+'" title="'+image.alt+'"></a></span>')
.append('<span class="image-wrapper"><a class="advance-link" rel="history" title="'+image.alt+'"></a></span>')
.find('a')
.append(image)
//.click(function() { clickHandler(gallery); })
.click(function() { buildLightBox(image,gallery,thisImageIndex); })
.end()
.fadeIn('fast');
if (this.onFadeIn) this.onFadeIn();
}
Also, are there any other jquery plugin you can suggest that has similar function?
not sure if this could help but did you try prettyPhoto plugin. i think it works the way you want.

Categories

Resources