Develop Reference

Html5 image Pixelation load

In my website, images are loaded from top to bottom, how can I change it so the images will load in Pixelation, like on Google Maps when are you zooming in?

Or if you want a pixelating/rendering blur, you could look here: https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/
Here is what is going on:
Render a div where the image will be displayed. Medium uses a with a padding-bottom set to a percentage, which corresponds to the aspect ratio of the image. Thus, they prevent reflows while the images are loaded since everything is rendered in its final position. This has also been referred to as intrinsic placeholders.
Load a tiny version of the image. At the moment, they seem to be requesting small JPEG thumbnails with a very low quality (e.g. 20%). The markup for this small image is returned in the initial HTML as an , so the browser starts fetching them right away.
Once the image is loaded, it is drawn in a . Then, the image data is taken and passed through a custom blur() function You can see it, a bit scrambled, in the main-base.bundle JS file. This function is similar, though not identical, to StackBlur‘s blur function. At the same time, the main image is requested.
Once the main image is loaded, it is shown and the canvas is hidden.
All the transitions are quite smooth, thanks to the CSS animations applied.
An example fromo the page:
<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
<img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
<noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"></noscript>
</div>
</div>
</figure>
Or you could check out this CodePen That JMPerez set up, in an atempt to recreate the effect himself.
I'm sorry about my first answer if its not what you were looking for.

jQuery load images in varying levels of quality

I have a load of images that I am displaying on a website.
I have each image in varying levels of quality. I have thumb(~10kb), small(~200kb), medium(~1.2mb) and large(~2.5mb). What I would like would be for the thumb image to be displayed and then have javascript load the small and replace it when it has loaded, then load the medium and replace that and so on. That way an image pops up straight away and just gets better and better quality.
The image is being displayed as the background of a div and the size is set as contain so it will stretch the smaller images to fill the space.
All I need to some jQuery which will load the image and when loaded replace the background.
UPDATE
This is how I've solved it. I've created hidden img element which loads each image and then displays when done. But I wouldn't say no to some help cleaning it up.
The html is just
<img id="image_loader" style="display:none;" />
And the jQuery is
$("#image_loader").attr("src", SmallURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+SmallURL+')');
$("#image_loader").attr("src", MedURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+MedURL+')');
$("#image_loader").attr("src", LargeURL);
$("#image_loader").load(function() {
$("#image_container").css("background-image", 'url('+LargeURL+')');
$("#image_loader").unbind('load');
});
});
});
But this is horribly messy. I've tried putting the URLs in an array and doing a $.each but it just skips to the large.
SECOND UPDATE
I've also found that I needed to unbind the load function once all images had been loaded or it would get stuck in an infinite loop. Hopefully if this can be cleaned up it can be done in a way which won't introduce any infinite loops.
Any ideas on how I can neaten this up?

The JQuery API might be a good starting point, if you haven't already checked it out.
What you're trying to do sounds like you want to load multiple images at each level of quality, so something like...
<img src="image_low.jpg" class="low"/>
<img src="image_med.jpg" class="med" style="display:none;"/>
<img src="image_high.jpg" class="high" style="display:none;"/>
<script>
$('.low').load(function() {
$(this).attr("src", $('.med').attr('src'));
});
$('.med').load(function() {
$(this).attr("src", $('.high').attr('src'));
});
</script>
EDIT: I had my own attempt here which was improved here

Image swap not functioning as expected in JavaScript

I've got 2 images one large and one small. The large one is 77 X 15 and the small one is 15 X 15.
Now these 2 images sit on top of another image (which can vary in size). What is supposed to happen is; when the user hovers over the small image, it is hidden and the large image is then displayed. Both images are wrapped in a DIV. I know that I can do this in a function (and I've got it working) but I need to try and keep it inline (criminal I know). Here's the code I've got so far. Bear in mind I was passed on this code.
<div id="small" style="position:absolute;top:0px;right:15px; z-index:5000;" onmouseover="this.style.visibility='hidden';" onmouseout="this.style.visibility='visible';">
<img src="small.gif" style="FILTER:Alpha(Opacity=50, FinishOpacity=50, style=0); position:absolute; width: 15px; height: 15px;" border="0" alt="text">
</div>
<div id="large" style="position:absolute;top:0px;right:77px; z-index:5000;" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"><img src="large.gif" style="position:absolute" border="0" alt="text">
</div>
What seems to happen is that when I hover over the larger image it disappears and then the small one just keeps flashing when you hover over it. Any ideas?
EDIT:Forgot to mention that both images are different, so I can't just resize one image.
I may be approaching this completely wrong so please let me know.
Thanks

i dont think it is a very gud approach, consider using just a simple jquery animation on a single div with single image . on mouseOver increase the height or whatever and on mouseout reduce it back again !!

Javascript Gallery onmouseUp with "#" link without jumping to top of page

I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!

Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">

I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.

I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).

Rotating 2 or More Images Individually

I desperately need to figure out how to be able to rotate 2 items (images, texts, etc.) on a page individually (e.g. NOT at the same time). Here's an example of what I'm talking about, but on this page, there is only 1 item (an image). When I try to duplicate the image, and then rotate it, both images end up rotating simultaneously: http://testerski.antaranian.me/
Can someone please, please, please show me the code for having the items rotate on their own? Thank you!!!

in main.js change to:
$(document).ready(function(){
$('#cc-element-1').rotatable();
$('#cc-element-2').rotatable();
});
add in your html:
<span id="cc-element-2" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" >
<img src="shirt.png" style="height: 197.35365477846602px; width: 265.1019243292827px;" >
</span>
Should work now. You should show your code cause i'm making an assumption of what you need to fix.