Published on

SDWebImage: Rasm yuklash va keshlashtirish (Caching) sirlari

Authors

SDWebImage nima va u nega kerak?

Rasmlarni internetdan tortib olish va ularni xotirada (cache) saqlashni o'zingiz noldan yozishingiz ham mumkin. Ammo haqiqiy loyihalarda bu ishni minglab marta sinovdan o'tgan maxsus paketlar (masalan, SDWebImage yoki Kingfisher) yordamida qilish ancha samarali va oson.

SDWebImage'ning eng asosiy afzalliklari:

  • Avtomatik keshlashtirish (Caching): Rasm bir marta yuklangach, qurilma xotirasida (diskda) saqlanib qoladi. Keyingi safar internetsiz ham darhol ochiladi.
  • Juda oson API: Bor-yo'g'i 1-2 qator kod bilan rasmni ekranga chizish mumkin.

1. Paketni o'rnatish

  • Xcode'da loyiha sozlamalaridan Package Dependencies bo'limiga kiring va + tugmasini bosing.
  • Qidiruv maydoniga https://GitHub.com/SDWebImage/SDWebImageSwiftUI ni joylashtiring.
  • Dependency Rule qismida "Up to Next Major Version" ni tanlang (shunda paketning mayda xatoliklar tuzatilgan yangi versiyalari o'zi avtomatik yuklanadi, lekin kodni buzadigan katta versiyalari emas).
  • "Add Package" ni bosing.

2. Asosiy foydalanish

Foydalanish juda sodda. WebImage dan foydalanamiz:

import SwiftUI
import SDWebImageSwiftUI

struct ContentView: View {
    var body: some View {
        WebImage(url: URL(string: "https://picsum.photos/200/300"))
            .resizable()
            .placeholder {
                // Rasm yuklanishni kutayotganda chiqib turadigan oyna
                ProgressView()
            }
            .indicator(.activity) // Aylanib turuvchi indikator
            .transition(.fade(duration: 0.5)) // Yumshoq paydo bo'lish animatsiyasi
            .aspectRatio(contentMode: .fit)
            .frame(width: 200, height: 200)
    }
}

3. Eng yaxshi arxitektura: Wrapper (Qobiq) yaratish

Ko'pchilik dasturchilar xato qilib WebImage ni butun loyiha bo'ylab yuzlab fayllarda to'g'ridan-to'g'ri ishlata boshlaydi. Agar ertaga SDWebImage o'rniga boshqa paketga o'tish kerak bo'lsa (masalan, Kingfisher'ga), hamma joyni o'zgartirib chiqishga to'g'ri keladi.

Buning o'rniga, SDK'ni yashirib turuvchi o'zimizning maxsus qobiq (Wrapper) komponentimizni yaratishimiz kerak:

import SwiftUI
import SDWebImageSwiftUI

// Boshqa fayllar faqat mana shu komponentni chaqiradi
struct ImageLoader: View {
    let url: String
    var contentMode: ContentMode = .fill

    var body: some View {
        WebImage(url: URL(string: url))
            .resizable()
            .aspectRatio(contentMode: contentMode)
    }
}

Endi ilovangizning barcha ekranlarida faqat ImageLoader(URL: "...") deb chaqirasiz. Boshqa fayllarda import SDWebImageSwiftUI deb yozish ham shart emas!

4. UI Xatoliklardan (Bugs) qochish usuli

SwiftUI'da ba'zan frame berganingiz bilan rasm uning chegarasidan toshib ketib (ayniqsa contentMode: .fill bo'lsa), boshqa tugmalarni bosishga xalaqit qilishi mumkin.

Bunga qarshi eng zo'r fokus: asosi qilib Rectangle berib, rasmni unga overlay sifatida ulashdir.

Rectangle()
    .fill(Color.clear)
    .frame(width: 200, height: 200)
    .overlay(
        ImageLoader(url: "https://picsum.photos/200")
            .allowsHitTesting(false) // Foydalanuvchi bexosdan rasmni bosib yubormasligi uchun
    )
    .clipped() // Faqat to'rtburchak doirasida qirqish

5. Rasmlarni oldindan yuklab olish (Prefetching)

Tasavvur qiling, siz Instagram kabi lenta qilyapsiz. Foydalanuvchi hali ekranning pastiga tushmasdan oldin, u yerdagi rasmlarni orqa fonda sekin yuklashni (prefetching) boshlasangiz, ilovangiz dahshatli darajada tez ishlaydi:

class ImagePrefetcherManager {
    static let shared = ImagePrefetcherManager()
    let prefetcher = SDWebImagePrefetcher.shared

    func prefetchImages(urls: [URL]) {
        prefetcher.prefetchURLs(urls)
    }
}

Bu usul tufayli rasmlar foydalanuvchi ekranni kaydirganida tayyor holda (keshdan) chaqmoqdek tez ochiladi!

Buy mea coffee