preload elements with none displaying div - javascript

i want to preload all my Elements before manipulating them with jquery and co.
i considered that i could make a div with display: none and put all elements in there which im using for my site.
<div id="preload" style="display: none">
<img src="1.png" />
<img src="bla.gif" />
<img src="another_one.png" />
<img src="cutelittlekitten.png" />
</div>
and then this to fade in my site.
$('#preload img').load(function() {
/* Site fades in all elements are preloaded */
});
is there any disadvantage to do it like that? and if, why and maybe another better solution?
edit: i would like to pre-cache the images!

Disadvantage is you're making people wait. Just lazy load your images instead - any image above the fold you use a legit src attribute, and any image below the fold, you do something like this:
<img class="lazyload" src="images/clear.gif" data-src="path/to/real/image.jpg" />
Then you could use a plugin like this or write your own to fade in images with the class 'lazyload' on scroll if they appear in the visible window region:
http://www.appelsiini.net/projects/lazyload
You could also simply lazy load all those images on window.load so they'll begin to fade in after the above-the-fold images are visible and ready.

Related

Make first image instant loading others lazy loading

Loop wrap class contains articles items on list/tag/pagination pages. What is js script to make first article image in a loop not lazy load and the next articles items lazy loading, so mobile screen have first image loaded instantly?
Maybe there is a script to add loading=lazy attribute to the 2nd and next image items in the list?
It must be js script.
<div class="loop-wrap">
<article class="post-card">
<div class="featured-image">
<img srcset="/home-office-gbd591828c_hu0f5a458a9401493855cf19b7f0eb18b5_233090_300x0_resize_q75_box.jpg 300w,
/home-office-gbd591828c_resize_q75_box.jpg 600w,
/home-office-gbd591828c_resize_q75_box.jpg 1200w" sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="/home-office-gbd591828c.jpg" loading="lazy" alt="Title">
</div>
<div class="about-post">
... redacted
</div>
</article>
</div>
It is not possible to manipulate the attributes before the DOM loaded.
According to:
https://web.dev/
All images that are above the fold—that is, immediately viewable without scrolling—load normally.
Make sure your first image is within this area.

Load external photo with javascript

I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?
I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});

Is it possible to add fancybox to portfoliojs image gallery?

Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE

show loading icon while loading video javascript

I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?
Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.

jQuery Fade In Fade Out On MouseOver Via Multiple Images In A Div

So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/

Categories

Resources