Hide or Replace Image using jQuery <small>on post area</small>

Salah satu cara untuk mempercepat tampilnya sebuah halaman blogsite adalah dengan mengatur apa-apa saja yang harus di load terlebih dahulu! Pada umumnya konten bergambar adalah satu faktor yang mempengaruhi terhadap speed page render :P Sobat mungkin pernah mendengar tentang lazy loading images? Teknik pintar menahan load gambar untuk tidak tampil terlebih dahulu, alias di tahan sementara waktu! Berikut 2 link source penjelasan Lazy Loading Images & Simple Image Lazy Load and Fade.

AA Koben akan berbagi tips serupa namun dengan technique yg sedikit berbeda. Itung-itung jalan alternatif yg tidak mau pasang lazy-load :D Cara tercepat untuk menahan laju load-image yaitu dengan tidak menampilkannya, melainkan kasih saja link URL agar di buka sendiri pada tab browser baru ini adalah gambar ;))
I. Cara pertama datang dari pen by Shaw dengan judul Basic Image Replacement Concept.
Snippet jQuery sederhana dengan menggantikan tampilan gambar di area postingan dengan gambar default. Gambar asli akan terbuka jika di klik/sorot.
Simpan seonggok script berikut di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
var tempSVG = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{w}} {{h}}'/>"; // Simplest possible SVG

var iconSVG = "<svg xmlns='http://www.w3.org/2000/svg' xmlns: xlink='http://www.w3.org/1999/xlink' viewBox='0 0 {{w}} {{h}}'><defs><symbol id='a' viewBox='0 0 90 66' opacity='0.3'><path d='M85 5v56H5V5h80m5-5H0v66h90V0z'/><circle cx='18' cy='20' r='6'/><path d='M56 14L37 39l-8-6-17 23h67z'/></symbol></defs><use xlink:href='#a' width='20%' x='40%'/></svg>"; // Basic 'picture' icon

$('.image-replacement').each(function(){
  var $this = $(this),
      data = $this.data(), // Get all the data attributes
      $img = $('<img />').attr({
                width: data.width,
                height: data.height,
            // Set src to temporary SVG with proper viewBox
                src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(iconSVG.replace(/{{w}}/g,data.width).replace(/{{h}}/g,data.height)),
            class: 'image-replacer', // Class for styling the temporary image
                title: 'Click to load' // Title attribute to encourage interaction
              })
              .appendTo($this)
        // Load image on click
              .on('mouseover touchmove click',function(){
          $img
                  .off('mouseover touchmove click')
                  .attr({
                   src: data.src, // Set the src to the real image
                    class: '', title: '', // clear out our temporary attributes
                 });
          });
});
//]]></script>

Sobat bisa delete tulisan mouseover touchmove kalau mau hasilnya di klik!

Planing HTML

<figure class="image-replacement" data-src="LINK-IMAGE" data-width="width" data-height="height">

</figure>

Tag figure bisa digantikan dengan div
II. Cara ke dua.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".run-img1").click(function () {
    var imgUrl = $(this).data('rel');
    $(".area-img1").html("<a href='" + imgUrl + "' target='_blank'><img alt='Img' src='" + imgUrl + "' title='Previw Data'/></a>");
});
});
//]]></script>

Markup HTML

<button class="run-img1" data-rel="LINK-IMAGE" title="Click for display image">W T F</button>

<div class="area-img1"></div>

Cara ke-2 ini sedikit ribet, soalnya kalau mau menampilkan gambar lebih dari satu pada area postingan, harus buat script serupa dengan unik-id yg berbeda pula #-o Kecuali anda tahu cara mengakalinya bagaimana :D
III. Cara ke tiga.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.change').click(function(event){
 var img=$(this).data('img');
  $(this).children('img').attr('src', img);
});
});
//]]></script>

Syntax HTML

<div class="change" data-img="LINK-IMAGE">

<img src="about:blank" alt="Click" />

</div>

Kode CSS

img[alt]:before {  

  color: #333;

  font-family: Roboto,Arial,sans-serif;

  font-weight: bold;

  content: attr(alt);

}

img[alt]:after {  

  color: #000;

  content: ' \21D4  to display image';

}

.change {

  cursor: pointer;

}

Itulah ketiga cara bagaimana cara menyembunyikan gambar pada area post untuk render page lebih cepat. Rumusan tersebut masih berupa konsep dan belum diberikan CSS style! Silahkan sobat berkreasi dengan ramuan itu. Cool man :-bd

Bonus

FontSelector 2.0 Find the best font - Scrolling half by half pure #CSS by @Kseso - 3D Social Media Animated Links - Zoom iMage with scale - Simple Vertical Slider - Donuts CSS Project - PopUp overlay animation - Responsive Image Comparison Slider - Image Comparison Slider - Responsive CSS3 Slider - Say Hello to world! - Glitch effect strobocops - Dynamic selection highlight with SVG Vignette - Content Loading Placeholder

Ooops...ada yg kelupaan, agar lebih ngabret rendering imagenya, lakukan terlebih dahulu compress terhadap image sebelum melakukan upload ke hostingan. Nih comot apps kompres gbr, it's good one created by Xkeshi image-compressor.

Bay...:-h