是否有当向下滚动到它，或者它只是影响到加载页面图像部分的能力？ [英] Is there ability to load page images partially when scroll down to it or is it just effect?
本文介绍了是否有当向下滚动到它，或者它只是影响到加载页面图像部分的能力？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一些网站已经注意到，如 http://mashable.com ，当你打开网页，并尝试滚动它，它似乎加载图片，当你达到它..我不知道这是否是一个公正的闪烁效果，或者它真的做，使图像的负荷较小，直到滚动呢？
I have noticed in some site such as http://mashable.com that when you open page and try to scroll it , it appear to load images when you reach it .. i don't know if it's a just flicker effect or it's really done to make less load of images till scrolling to it ?
推荐答案
下面是一个脚本，让你开始。你需要做的图像的URL的东西，而不是只显示他们，但我敢肯定，你会想出解决办法...
Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
这篇关于是否有当向下滚动到它，或者它只是影响到加载页面图像部分的能力？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
