我在同一页面上有1000张图片.不幸的是,我不能在它们上使用精灵,因为图像的数量不断增加.因此,您可以想象它会发送1000个HTTP请求,因此需要花费大量时间来加载图像,这对访问者来说并不是很好的体验.
我看过其中一个名为Lazy Load的脚本,但我在想是否有更聪明的方式加载图像(关于SEO的好处,加载图像更快,对用户体验有好处).
有没有办法以更好的方式加载图像？
详细说明:
我必须在同一页面上加载所有1000张图片,没有别的出路.它会是什么样的或者我将要用它做什么,我实际上已经在http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html 上为你做了一个测试页面.
如您所见,我使用的是Jacek Galanciak制作的jQuery Quicksand插件.我与这个插件没有很好的关系,好像我要添加jQuery或脚本.它会要求一个回调函数,这对我来说是一个盲点.(这就是我为它制作CSS工具提示的原因:D)
我的测试页面上有很多图片但不是1000张.当它们是1000时,它会很乱.所以我不知道在这种情况下如何处理1000张图像.(顺便感谢你们所有人的可爱评论)
我环顾互联网并且总是看起来像过去6个月的脚本,可以加载Flash内容/游戏,同时显示实际的加载屏幕但我总是收到一些答案:
但最后我发现了一些我永远在寻找的东西.一个基于Jquery的脚本,显示实际加载(也显示广告),并使用swf对象与Flash内容进行通信.它真的很棒,因为它不需要你对FLA进行更改,它只是纯粹的外部环境处理.所以现在问题就出现了什么问题.那么问题是这个脚本是为像素而制作的,如果你使用宽度和高度为闪光像素,它可以工作,而我不能使用像素,因为我使用%age(这样用户可以选择全屏显示)按f11).
所以你可以看到我希望那个脚本能够解决%age问题,但正如我前面提到过的,我没有立刻来到这里,我在前几个月的14个论坛中一直在寻求帮助(实际乞讨)当然还有一些好人仍然存在,有些人帮助我达到某一点(但它没有解决问题)所以现在我将提供一些标记:
这里是我正在谈论的脚本链接http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html(这是该脚本创建者的链接)
这是一个工作示例的链接(基于像素的flash) http://www.balloontowerdefense.net/jquery-preloader/example.html
有人在这里帮了我,但是1个月前它没用.该人告诉我,我应该更改名为Preroll的插件,这些更改首选
修改插件以使用用户提供的单位而不是像素.为此,您需要修改插件中的两个函数,applygameiframe和showgame.
applygameiframe should be changed to:
var applygameiframe = function() {
var gc = '#'+settings.gameframe;
var iframe = $('<iframe />').attr({
"id": settings.gameid,
"src": settings.swf,
"frameborder": 0,
"scrolling": "no",
"marginwidth": 0,
"marginheight": 0
}).css({
"height":'settings.height
"width": settings.width
});
$(gc).append(iframe);
return true;
};
showgame should be changed to:
var showgame = function() {
var ac = '#' + settings.adframe;
var game = '#' + settings.gameframe;
$(ac).hide();
$(game).css({
"width": settings.width,
"height": …精心制作页面全屏是我最喜欢的主题之一,但每当我想到这样做时,我总是收到一个答案,那就是,它只能用flash完成.今天我第一次看到一个没有用flash完成的,有人可以告诉我它是如何完成的,所以我可以充分利用它的梦想^^这里是图像 http://content.screencast.com /users/cryoffalcon/folders/Jing/media/5ac91f6f-ed2f-4312-b8e3-3ac9771f5497/2012-04-13_0001.png
这是指存在此全屏按钮的页面的链接. http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
我不希望图像加载,直到链接悬停,所以这是脚本,但它不起作用,有人可以帮我纠正它吗？我为每个链接添加了一个事件监听器,并在mouseover上调用了一个设置图像的函数.为了使事情更有趣,我们可以在这里复制lazyload,并使用data-original属性:)
例如:这是HTML代码:
<li>
<a href="#" class="tip_trigger">
<img class="tip" alt="300 Grams"
data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
src='empty.gif' width="90" height="90"/>
Alex
</a>
</li>
然后,添加一个事件监听器:
码:
// call for each element with the class 'tip' that's being hovered upon
$('.tip').hover(function()
{
// retrieve the image inside this element
var elem = $(this).find('img');
// set the 'src' to the 'data-original' value
elem.attr('src', elem.attr('data-original'));
});
对于现场演示,您可以看到此页面http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html 脚本的上述部分仅添加到"A"类别中的第一个字母ALEX.
我正在使用响应滑块它不会停留在悬停,我不明白为什么,这是我的脚本告诉它暂停悬停
<script type='text/javascript'>
$(function () {
$(".rslides").responsiveSlides({
timeout: 8000,
pause: true,
});
});
</script>
这是实现它的页面的实时演示http://bloghutsbeta.blogspot.com/2012/04/testing-slider.html
相关标记:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://files.cryoffalcon.com/javascript/responsiveslides.min.js' type='text/javascript'/>
HTML:
<ul class="rslides">
<li><img width="660" height="400" src="http://responsive-slides.viljamis.com/1.jpg" alt="" /></li>
<li><img width="660" height="400" src="http://responsive-slides.viljamis.com/2.jpg" alt="" /></li>
<li><img width="660" height="400" src="http://responsive-slides.viljamis.com/3.jpg" alt="" /></li>
</ul>
CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 660px;
padding: 0;
margin: 0;
height:400px;
}
.rslides li {
position: absolute;
width: 660px;
height:400px;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: …