Kullanıcı sadece ekrana geldiğinde nasıl resim yüklerim?

Question

Birçok site, kullanıcının görüntüleri görmesi için sayfayı yeterince aşağı kaydırdığında yalnızca görüntüleri indirdiği veya belgenin bazı bölümlerini oluşturduğu (örneğin, incelemeler için) görünür.

Bu, size daha hızlı yükleme sayfaları sunacak ve aşağı kaydırma yapmayan herkes için bant genişliğinden tasarruf edecektir.

Bu nasıl yapılır, ideal olarak jquery ile mi? Ya da başka bir şekilde sormak için, eksik bir görüntünün sadece görüntülendiğini ve alınmasının gerekip gerekmediğini nasıl anlarım?

Answer 1

Bunun için eklentiler vardır. Here's one ...

Answer 2

İşte benim. İyi eğlenceler. (JQuery gerektirmez!)

Test: IE 5.5+, FF 2+, Chrome, Opera 9.6+

Kullanımı:

1. senin lazyloaded görüntüleri olmalıdır onların thumb özniteliğinde gerçek src

2. Sadece javascript dosyasını inline veya external olarak ekleyin. Eğer tüm sayfada kullanmak istemiyorsanız

3. , yapabileceğiniz:

   LazyImg().destroy(); // stop global fetching 
   LazyImg("watch-only-this-div"); 
   

   Not: Dosyayı eklediğinizde küresel örneği zaten belgenin tamamını izliyoruz oluşturulur. Önce bunu durdurup kendi örneğini başlatmalısın.

   4. set ön yükleme için ofset özel (ne kadar ekranın alt kısmı görüntü getirilen olmalıdır)

      // watch the whole document 
      // prefetch offset: 300px 
      LazyImg(document, 300); 
      

Kodu:

// 
// LAZY Loading Images 
// 
// Handles lazy loading of images in one or more targeted divs, 
// or in the entire page. It also keeps track of scrolling and 
// resizing events, and removes itself if the work is done. 
// 
// Licensed under the terms of the MIT license. 
// 
// (c) 2010 Balázs Galambosi 
// 

(function(){ 

// glocal variables 
var window = this, 
    instances = {}, 
    winH; 

// cross browser event handling 
function addEvent(el, type, fn) { 
    if (window.addEventListener) { 
    el.addEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.attachEvent("on" + type, fn); 
    } else { 
    var old = el["on" + type]; 
    el["on" + type] = function() { old(); fn(); }; 
    } 
} 

// cross browser event handling 
function removeEvent(el, type, fn) { 
    if (window.removeEventListener) { 
    el.removeEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.detachEvent("on" + type, fn); 
    } 
} 

// cross browser window height 
function getWindowHeight() { 
    if (window.innerHeight) { 
    winH = window.innerHeight; 
    } else if (document.documentElement.clientHeight) { 
    winH = document.documentElement.clientHeight; 
    } else if (document.body && document.body.clientHeight) { 
    winH = document.body.clientHeight; 
    } else {  // fallback: 
    winH = 10000; // just load all the images 
    } 
    return winH; 
} 

// getBoundingClientRect alternative 
function findPos(obj) { 
    var top = 0; 
    if (obj && obj.offsetParent) { 
    do { 
     top += obj.offsetTop || 0; 
     top -= obj.scrollTop || 0; 
    } while (obj = obj.offsetParent); // 
    return { "top" : top }; 
    } 
} 

// top position of an element 
var getTopPos = (function() { 
    var dummy = document.createElement("div"); 
    if (dummy.getBoundingClientRect) { 
    return function(el) { 
     return el.$$top || el.getBoundingClientRect().top; 
    }; 
    } else { 
    return function(el) { 
     return el.$$top || findPos(el).top; 
    }; 
    } 
})(); 

// sorts images by their vertical positions 
function img_sort(a, b) { 
    return getTopPos(a) - getTopPos(b); 
} 

// let's just provide some interface 
// for the outside world 
var LazyImg = function(target, offset) { 

    var imgs, // images array (ordered) 
     last, // last visible image (index) 
     id,  // id of the target element 
     self; // this instance 

    offset = offset || 200; // for prefetching 

    if (!target) { 
    target = document; 
    id = "$document"; 
    } else if (typeof target === "string") { 
    id = target; 
    target = document.getElementById(target); 
    } else { 
    id = target.id || "$undefined"; 
    } 

    // return if this instance already exists 
    if (instances[id]) { 
    return instances[id]; 
    } 

    // or make a new instance 
    self = instances[id] = { 

    // init & reset 
    init: function() { 
     imgs = null; 
     last = 0; 
     addEvent(window, "scroll", self.fetchImages); 
     self.fetchImages(); 
     return this; 
    }, 

    destroy: function() { 
     removeEvent(window, "scroll", self.fetchImages); 
     delete instances[id]; 
    }, 

    // fetches images, starting at last (index) 
    fetchImages: function() { 

     var img, temp, len, i; 

     // still trying to get the target 
     target = target || document.getElementById(id); 

     // if it's the first time 
     // initialize images array 
     if (!imgs && target) { 

     temp = target.getElementsByTagName("img"); 

     if (temp.length) { 
      imgs = []; 
      len = temp.length; 
     } else return; 

     // fill the array for sorting 
     for (i = 0; i < len; i++) { 
      img = temp[i]; 
      if (img.nodeType === 1 && img.getAttribute("thumb")) { 

       // store them and cache current 
       // positions for faster sorting 
       img.$$top = getTopPos(img); 
       imgs.push(img); 
      } 
     } 
     imgs.sort(img_sort); 
     } 

     // loop through the images 
     while (imgs[last]) { 

     img = imgs[last]; 

     // delete cached position 
     if (img.$$top) img.$$top = null; 

     // check if the img is above the fold 
     if (getTopPos(img) < winH + offset) { 

      // then change the src 
      img.src = img.getAttribute("thumb"); 
      last++; 
     } 
     else return; 
     } 

     // we've fetched the last image -> finished 
     if (last && last === imgs.length) { 
     self.destroy(); 
     } 
    } 
    }; 
    return self.init(); 
}; 

// initialize 
getWindowHeight(); 
addEvent(window, "load", LazyImg().fetchImages); 
addEvent(window, "resize", getWindowHeight  ); 
LazyImg(); 

window.LazyImg = LazyImg; 

}());