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.
Related
On a webpage I have some charts that I'm creating with pChart and they take a while to generate.
In order to make the page finish loading in a reasonable amount of time, I've put instead of these charts some pictures (also generated with pChart) that just have a text that says 'Click here to load chart XYZ'.
My problem is that when the user clicks on the picture, the div shrinks to zero and that causes other divs to change position. So I'm thinking of displaying a loading (animated) gif in place of the charts while they are generated. This should also provide a visual indication after the click that the chart is being generated, as well as prevent the div from shrinking.
Here's the code that I'm using so far:
<head>
<script>
function myFunction(where){
var content = '<img style="some style" src="chart.php">';
document.getElementById(where).innerHTML = content;
}
</script>
</head>
<body>
<div id="id1" style="some style">
<img style="some style" src="click-to-load.php" onclick="myFunction('id1')">
</div>
</body>
The above works as I've described: the div shrinks and the user doesn't have any other visual indication that something is happening in the background and there will eventually be displayed something as a result of the click.
So, how do I change the onclick event to display a gif, request the php chart (which is just a jpeg image), and when it's ready dsplay it instead on the loading gif?
On one hand, to avoid the shrinking issue, you could set a width and a height on <div id="id1"></div in order to keep this room even if there is nothing inside. The rest of elements in the page will remain where they are.
On the other hand, when you click on the initial image, you want two things to happen: 1) to swap this image for a gif, 2) and to execute a php file that will load some content.
You only need to set var content with the gif you want to show up, which will happen inmediately, and execute the php file, that will take a while, and then replace the gif with its content.
By the way, the src attribute should have the path to the image.
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
I have a banner, and it's a certain size. It has decorations on it.
I also have my whole website style sheet based on percentages on the page. I want to keep it this way.
However, is there a way to dynamically resize my banner image? So if I shrink the webpage down, it does not omit any part of the banner?
Hi is very simple without jquery you can do this only css
i give you code
css part
.imgresize{
width:50%;
}
.imgtag{
width:100%;
}
html part
<div class="imgresize">
<img src="https://www.google.pt/images/srpr/logo3w.png" alt="google" class="imgtag" />
</div>
and live demo now click here
http://jsfiddle.net/rohitazad/aJdmu/1/
Your question is kind of blurry, but to resize properly an image you can play on the width or the height value (or both) of an
<img width="width_value" src="img_src" />
tag for example. The browser will keep the proportions of the image if you only change one attribute. Changing these values using Javascript is easy and this should not alter your layout.
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 !!
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.