LMLPHP后院

JavaScript实现图片懒加载非可视区域延迟加载技术

maybe yes 发表于 2014-12-13 18:24

网页上图片很多时,如果不对图片使用懒加载(延迟加载)技术,网站显示速度就会很慢,给用户的感觉很不好,图片资源服务器的负载也会很大,一般不太好的服务商会直接返回 503 Service Unavailable 暂停服务错误。很多网站在处理这个问题时,直接使用 JQuery 的懒加载扩展,这样一来,网站必须要加载 JQuery,速度自然下降。JQuery 是一个很臃肿的 JavaScript 框架,虽然非常强大,但我个人认为不适合做前端,只适合做后台。网站前端的用户一般都不是很经常来,第一次来就要加载这么多的资源,给用户感觉网站非常慢。大部分的网站都是小网站,流量都很小,网站也都是运行在虚拟主机上,这样一来,JQuery 放在自己的站点上流量耗费很大;使用免费的 CDN 也通常不太稳定,并且浏览器得重新解析新的域名,网站速度自然上不去。

LMLPHP官方网站全站URL链接模式说明公告

maybe yes 发表于 2014-12-13 16:16

关于网站的建设,我个人认为一个网站最重要的是 URL 的设计,这个直接决定网站质量和后期维护。一个负责任的站长一定要为自己的网站曾经出现过的链接地址负责到底,在当今社会,尤其在中国,这样的人太少了,垃圾站点随处可见。由于本人的性格的缘故,我做不出那种只为了广告费就到处搜集垃圾内容吸引流量的站点,要做就要认真做,做好的内容。

为了让用户更加了解本站,这里将列出本站所有出现过的URL模式,为网站更好的发展做个记录。

LMLPHP主站地址:http://www.lmlphp.com/

LMLPHP博客地址:http://blog.lmlphp.com/

LMLJS官网地址:http://lmljs.lmlphp.com/

百度Bing360等搜索引擎网页快照时间显示错误声音

maybe yes 发表于 2014-12-13 00:18

自建站以来,我经常关注各大搜索引擎对站点的快照情况。一开始,并没有感觉出有任何的问题,渐渐的时间长了,对网页快照的时间产生了怀疑,感觉有些不对劲。为了证明我的疑惑,后来我在站点的底部加入了时间显示,每次请求都会带上本次请求的准确时间信息,在页面底部用脚本将时间隐藏。由于百度和360对网页快照是直接过滤JS的,所以在快照的页面就会直接显示出快照页的准确时间,Bing(必应)的网页快照没有过滤JS,通过查看DOM节点一样可以看出本次快照页的准确时间。加入快照页时间显示后得出结论,国内搜索引擎的快照显示时间非常不准,很多网页相差一个多月,国外的Bing对网页的快照显示时间稍微准确,一般相差一天左右的时间。

必应网页快照截图-LMLPHP后院
360网页快照截图-LMLPHP后院

基于JavaScript在线头像图片编辑前端后台实现技术

maybe yes 发表于 2014-12-12 10:58

前端使用Jcrop实现预览和获取图片大小,选定位置等信息。关于Jcrop,项目地址在GITHUB上,它基于MIT开源协议。本人看了下项目的源代码,感觉作者蛮认真的。Jcrop做到了兼容IE系列和其他主流浏览器,非常稳定,让开发者不再为前端方面花费太多精力。加上本人不太喜欢Flash实现,纯JavaScript实现的功能效率会更高。由于时间比较仓促,代码没有过多的优化,有点乱,下面公布前端实现和服务端处理图片部分代码。

前端实现方式如下:

<link rel="stylesheet" href=".../jcrop/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.css">
<script src=".../jcrop/tapmodo-Jcrop-1902fbc/js/jquery.min.js"></script>
<script src=".../jcrop/tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.js"></script>
<style>
#preview-pane{
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 6px;
    position: absolute;
    right: -160px;
    top: 0;
    z-index: 2000;
}
#preview-pane .preview-container {
    height: 100px;
    overflow: hidden;
    width: 100px;
}
.cropdiv{
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
    height: auto;
    left: 200px;
    opacity: 0.9;
    position: absolute;
    top: 230px;
    width: 600px;
    z-index: 100;
    padding:10px;
}

.cropdiv .preinfo{
    float: right;
    left: 500px;
    position: absolute;
    top: 160px;
}
.cropdiv .title{
    font-size:14px;
    font-weight:bold;
    margin-bottom:10px;
}
.cropdiv .save{
    text-align:center;
}
.cropdiv .save a{
    background-color: #ff832b;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    height: 30px;
    padding:2px 5px;
    font-size:16px;
    margin:5px;
}
</style>
<script>
var startcrop = function( imgsrc ) {
    var jcrop_api, boundx, boundy, posinfo,
    imgsrc_rand = imgsrc + '?' + Math.round(Math.random() * 10000);

    // Grab some information about the preview pane    
    var $preview_html = 
        '<div id="preview-pane">'
            +'<div class="preview-container">'
            +'<img src="" class="jcrop-preview" alt="Preview">'
            +'</div>'
        +'</div>';
    
    $(document.body).append($preview_html);
    var $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),

    xsize = $pcnt.width(),
    ysize = $pcnt.height();
    $pimg.attr('src',imgsrc_rand);
    
    var cropimgdiv = $('<div/>').addClass('cropdiv').css({"opacity":.9})
    .append(function(){
        return $('<div/>').append("<span>编辑头像</span>").addClass('title');;
    })
    .append( function(){
        return $('<img/>').attr( {"src":imgsrc + '?' + Math.round(Math.random() * 10000)
            ,"id":"cropimg"}) 
    })
    .append(function(){
        return $('<div/>').append( $("<a/>").html("保存头像").click(function(){
            $.ajax({
                type:'POST',
                url: 'handle crop url',
                dataType:'json',
                data:{ 'posinfo':posinfo, "boundx":boundx, "boundy":boundy },
                success:function( data ) {
                    // do something on success
                    cropimgdiv.remove();
                    $preview.remove();
                }
            });
        }) ).addClass('save');
    })
    .appendTo(document.body);
    
    if ($("#cropimg").get(0).naturalWidth > 400) {
        $("#cropimg").attr({"width":400});
        JcropRun();
    } else { // IE6/7/8
        var image = new Image()
        image.src = imgsrc_rand;
        image.onload = function(){
            if( image.width > 400){
                $("#cropimg").attr({"width":400});
            }
            JcropRun();
        };
    } 

    function showCoords(c)
    {
        /* variables can be accessed here as
        // c.x, c.y, c.x2, c.y2, c.w, c.h*/
        posinfo = c;
        if (parseInt(c.w) > 0) {
            var rx = xsize / c.w;
            var ry = ysize / c.h;
            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    };
    
    var JcropRun = function(){
        $('#cropimg').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 0, 0 ],
            minSize:   [ 100, 100 ],
            aspectRatio: xsize / ysize
        },function(){
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            $preview.css({"display":"block"});
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
    }
};
</script>

JavaScript头像图片编辑运行图-LMLPHP后院
JavaScript头像图片编辑运行图-LMLPHP后院

南京旅行玄武湖风景区游记多图院内

maybe yes 发表于 2014-12-06 18:05

下午去火车站后,时间还早,我去了玄武湖,比我想象中的要好看。个人感觉比西湖好,以前在西湖边上走的时候,总会碰到很窄的路,或者是被餐厅挡住了。我怕时间不够,走的比较快,在岔路时向湖中央方向去了,绕了玄武湖一圈,花了1个小时30分的样子,一路的风光都特别好,道路很宽敞,没有什么商业气息。在南京市区能有钟山和玄武湖这样大面积的景区,真的很难得,这在上海是一种奢望。

从火车站南广场出来后为起点,我认识了两位驴友,他们在南京工作,我让他们帮我拍了照片。拍照后我们以相反的方向去了,在玄武门前面不远处我们再次相遇,真的很有缘分。后来看他们的QQ空间,他们也绕了玄武湖一圈。在玄武湖拍的照片比之前几个景区要多很多,只能挑选一部分照片发出来。

玄武湖南京站南广场入口处-LMLPHP后院
玄武湖南京站南广场入口处-LMLPHP后院
LMLPHP,可爱滴WEB开发框架

2017-09-23 04:31:34 1506112294 0.007878